import {
  IObservableFactory,
} from 'xmobx/mobx'
import {
  Observer,
} from 'xmobx/mobx-react'
import {
  Serializable,
} from 'typings/generic'
import {
  ApolloQueryResult,
  ApolloClient,
  DocumentNode,
  WatchQueryOptions,
} from 'typings/other/apollo'
import React from 'react'
import {
  OmniStore,
} from 'src/state/OmniStore'
import { OneStorage } from 'modules/persistance/local-storage'
import { CookiesStatic } from 'modules/persistance/cookies'
import { OneRouter } from 'modules/router'
import { Request as OneRequest } from 'modules/oneRequest'

interface SchemaAttributes extends React.ScriptHTMLAttributes<any> {
  data: string
}
interface JSONLD extends React.ReactHTMLElement<SchemaAttributes> {

}

interface ObservableContainerDynamicState {
  isLoading: boolean
}
export declare class ObservableContainer {
  fetchInitialOnServer(props: React.Attributes): Object
  rehydrateInitialOnWeb(props: Serializable): never

  // getters
  oneRouter: OneRouter
  CookiesStatic: CookiesStatic
  oneStorage: { OneStorage }
  oneRequest: OneRequest
  store: OmniStore
  omniStore: OmniStore
  schemaElement: JSONLD

  Query?: DocumentNode
  isLoading: boolean
  dynamicState: ObservableContainerDynamicState

  /**
   * @modifies this.isVisible
   */
  query(configOrVariables: WatchQueryOptions, context?: ''): Promise<DocumentNode>

  extendShallowObservable(types: Object): ObservableContainer
  extendObservable(types: Object): ObservableContainer

  handleMount(apiData: Serializable): never
  handleUpdate(props: React.Attributes, ref: Observer): never
  handleProps(props: React.Attributes, ref: Observer): React.Attributes
  handleUpdate(props: React.Attributes, ref: Observer): any

  observable(data: any): IObservableFactory
  observer(Target: React.Component): Observer

  // @todo
  connectToData(Target: React.Component): Observer
}

// go through everything = this breaks in code splitting because you don't have everything
// 1. map through routes
// 2. check components for .getInitialState

// in the decorator on page level for container.connectToData
// it runs right away and you can get a lifecycle hook
// to fetch
//
// in catalog container
// .isRoute { router.key === 'catalog' }
// .connectToData => this.isRoute && this.onRoute()
// onRoute => fetching!!!!!!
// {
//   key: 'catalog',
//   path: '/products/:category',
//   component: toComponent(),
//   exact: true,
//   // container: {}
// }