/**
 * @file this file is for extending this class
 * @see ./connectToData for how this class is connected to a component further
 *
 * @description @tip use "[command] + [left-mouse-click]" to open up the type definitions!
 */
import { isObj } from '@skava/modules/exotic'
import { ApolloQueryResult, ApolloClient, DocumentNode } from '@skava/typings'
import * as React from 'react'
import { graphql } from 'react-apollo'
import mobx, { observable } from 'xmobx/mobx'
// ours
import oneStorage from '@skava/modules/persistance/local-storage'
import oneCookie from '@skava/modules/persistance/cookies'
import oneRouter from '@skava/modules/router'
import { Request as OneRequest } from '@skava/modules/oneRequest'
// local
import client from '../client/apolloClient'
import { withStore } from './connectToData'
import { omniContainer } from './oneState'
import registry from './containerRegistry'

/**
 * !!!!!
 * @TODO there should be many classes extending this these
 *       these are observable observable container, only 1 instance like singleton pattern
 *       but only 1 `oneState` 1 `oneRouter` ever
 * !!!!!
 *
 * @tutorial https://mobx.js.org/refguide/map.html
 * @extends BaseChain
 * @see modules/oneRequest
 * @param {Mobx.observable} store
 */
class ObservableContainer {
  static debugName?: string
  named?: string

  // could take in debug name in props...
  constructor() {
    this.named = this.constructor.debugName || this.constructor.name

    if (process.env.DEVTOOLS_REGISTRY_BY_NAME_ENABLED) {
      registry.set(this.named, this)
    }
  }

  // === this may not be used, could remove for perf? ===
  get containers() {
    console.warn('.containers @used')
    return registry
  }
  // this helps put it at the bottom of our inspector in dev tools
  get oneRouter(): oneRouter {
    console.warn('.oneRouter @used')
    return oneRouter
  }
  get oneCookie() {
    console.warn('.oneCookie @used')
    return oneCookie
  }
  get oneStorage() {
    console.warn('.oneStorage @used')
    // .cookies, .ls
    return oneStorage
  }
  get oneRequest(): OneRequest {
    console.warn('.oneRequest @used')
    return OneRequest
  }
  // === use .omniStore
  get store() {
    throw new TypeError('do not use omnistore')
  }
  get omniStore() {
    throw new TypeError('do not use omnistore')
    // return omniContainer.store
  }

  get isLoading(): boolean {
    return this.dynamicState.isLoading
  }
  set isLoading(isLoading: boolean) {
    if (isObj(this.dynamicState) === false) {
      this.dynamicState = observable.object()
    }
    this.dynamicState.isLoading = isLoading
  }

  /**
   * @todo @name
   * @name gql
   * @alias apollo
   */
  get client(): ApolloClient {
    return client
  }

  dynamicState: {
    isLoading: boolean
  }

  /**
   * @NOTE THIS IS NOT REALLY USED BY ANYTHING, IT'S JUST A WAY TO HOOK INTO COMPONENT LIFECYCLE IN A CONTAINER
   * @protected
   * @action
   * @description
   * @param {Object} apiData
   * @return {*}
   */
  // handleMount(apiData) {
  //   // if (this.rehydrateInitialOnWeb && apiData !== undefined) {
  //   //   return this.rehydrateInitialOnWeb(apiData)
  //   // }
  //   // console.info('should extend .handle mount', apiData)
  //   console.info('should extend .handle mount')
  //   return undefined
  // }
  /**
   * @protected
   * @listens componentWillUnmount
   * @param {*} props
   */
  handleRemove() {
    //
  }

  /**
   * @protected
   * @listens componentWillReceiveProps
   * @param {*} props
   */
  handleUpdate(props) {
    //
  }

  /**
   * @tutorial https://reactjs.org/docs/higher-order-components.html
   */
  public connectToData = (Target: React.Component) => {
    return withStore(this, Target)
  }
  public connectToGraph = (Target: React.Component) => {
    throw new Error('use connectToData')
  }
}

export { ObservableContainer, registry }
export default ObservableContainer