// ------

  // === not needed...
  setHandleProps(fn: Function): ObservableContainer {
    this.handleProps = fn
    return this
  }

/**
 *
 * @description when the view mounts or gets new data
 *              we can handle things going through
 * @event componentWillMount
 * @event componentWillReceiveProps
 *
 *
 * @alias interceptProps
 * @param {React.Props} props container.oneStore
 *
 * @return {React.Props} decorated props available to the component we are wrapping
 *
 * @note if the store has any handle props function
 *              call it, so it can change the props
 *
 *              by default, we use tapProps which adds routing props
 *              and the omnistore
 */
function handleProps(props) {
  const self = this
  return { ...props, ...self }
  // return tapProps(this, props)
}

  // @perf @prod
  // get debug() {
  //   return {
  //     containers: registry,
  //     omniStore: this.omniStore,
  //     endpoints: window.endpoints,
  //     apis: window.apis,
  //   }
  // }

  // query<T>(options: WatchQueryOptions): Promise<ApolloQueryResult<T>>;
  // mutate<T>(options: MutationOptions<T>): Promise<FetchResult<T>>;
  // subscribe(options: SubscriptionOptions): Observable<any>;
  // readQuery<T>(options: DataProxy.Query): T | null;
  // readFragment<T>(options: DataProxy.Fragment): T | null;
  // writeQuery(options: DataProxy.WriteQueryOptions): void;
  // writeFragment(options: DataProxy.WriteFragmentOptions): void;
  // gql = {
  //   // CRUD
  //   query: 'QueryHere',
  //   // dynamic
  //   // variables: {},
  // }

  get client(): ApolloClient {
    const query = client.query

    /**
     * only works watchQuery
     * @description query wrapper to enforce fetch policy default
     * @see https://www.apollographql.com/docs/react/basics/queries.html#graphql-config-options-fetchPolicy
     */
    // client.query = function(config, ...args) {
    //   config.fetchPolicy = config.fetchPolicy || 'cache-and-network'
    //   return query(config, ...args)
    // }
    return client
  }

  dynamicState: {
    isLoading: boolean
    // yagniu
    observableQuery: {}
    previousData: {}
  }
  // === not really needed
  get previousQueryResult() {
    return (
      this.dynamicState.previousData ||
      this.dynamicState.observableQuery.getLastResult()
    )
  }
  get queryResult() {
    return this.dynamicState.observableQuery.currentResult()
  }


// variables,
  // pollInterval,
  // query,
  // fetchPolicy,
  // errorPolicy,
  // notifyOnNetworkStatusChange,
  // this.dynamicState.observableQuery = client.watchQuery(this.queryOptions)
  // this.dynamicState.observableQueryResult = this.dynamicState.observableQuery.currentResult()
  Query: DocumentNode
  Mutate: DocumentNode
  // QueryOptions: Object = {}
  // const response = await client.query({ query: CategoryListQuery })
  // const responseB = await getNavCategories()
  // const { categoryList } = response.data
  // getQueryResult =() => {
  //   const previous = this.previousQueryResult
  //   const { error, loading, data, errors, networkStatus } = this.queryResult()
  //   this.currentResult = this.queryResult()
  //   const obj = loading ? previous : data
  //   const isDataFilled = x => Object.keys(x) > 0
  //   // return {
  //   //   data: isDataFilled(data) ? data : undefined,
  //   //   ...observableQueryFields(this.queryObservable),
  //   // }
  // }
  QueryPropsMapper: Function = props => props

  // @private
  apollo(response, queryOptions) {
    const data = response.data

    // @perf @todo
    this.dynamicState.response = response
    this.dynamicState.isLoading = response.loading
    this.dynamicState.queryOptions = queryOptions

    // if (isArray(data.cookies) === false) {
    //   console.warn('_NO_COOKIES_ON_APOLLO_RESPONSE_')
    //   console.warn('_NO_COOKIES_ON_APOLLO_RESPONSE_')
    //   console.warn('_NO_COOKIES_ON_APOLLO_RESPONSE_')
    //   data.cookies = EMPTY_ARRAY
    // }

    return data
  }

  // private
  _SERVER_SIDE_RENDERING_DO_NOT_USE_ME_OR_ELSE_DOT_DOT_DOT() {
    if (this.ClientOptions && this.ClientOptions.mutation) {
      return this.mutate()
    } else {
      return this.query()
    }
  }


  // this first arg is not used........
  async mutate(mutate, configOrVariables = undefined) {
    // @todo make sure dynamicState updates
    const queryOptions =
      configOrVariables ||
      this.ClientOptions ||
      this.dynamicState.queryOptions ||
      configOrVariables
    const response = await this.client.mutate({ mutate, queryOptions })
    return this.apollo(response, queryOptions)
  }

  // @michael, first arg is not used...
  async query(query, configOrVariables = EMPTY_OBJ) {
    // this lets you pass in `variables` or the whole config
    const { Query } = this
    const defaultQueryArgs = {
      query: Query,
      // variables: configOrVariables,
      // !!! options.variables !!!
      options: configOrVariables,
    }
    const queryOptions =
      configOrVariables ||
      this.ClientOptions ||
      configOrVariables.options ||
      configOrVariables.query
        ? configOrVariables
        : defaultQueryArgs

    if (configOrVariables === EMPTY_OBJ) {
      return Promise.resolve(EMPTY_OBJ)
    }
    const response: ApolloQueryResult<Query> = await this.client.query({
      query,
      queryOptions,
    })
    return this.apollo(response, queryOptions)
  }


  // -------

  /**
   * @protected
   * @type {handlePropsType}
   * @see handlePropsType
   * @override this function to handle props easily
   * @param {*} props
   */
  _handleProps(props, ref) {
    // console.info('DEFAULT_HANDLEPROPS', props)
    Object.defineProperty(this, 'props', {
      enumerable: false,
      configurable: true,
      // writable: true,
      get() {
        return props
      },
    })
    Object.defineProperty(this, 'context', {
      enumerable: false,
      configurable: true,
      // writable: true,
      get() {
        return ref.context
      },
    })
    // this.props = props
    // this.context = ref.context
    if (isFunction(this.handleProps) === true) {
      return this.handleProps(props)
    } else {
      return handleProps.call(this, props)
    }
  }