return (
    <Query
      query={GET_FILTER_QUERY}
      pollInterval={160000}
      variables={{ input: {} }}
    >
      {({ loading, error, data, refetch }) => {
        if (loading) return null
        if (data) {
          return (
            <Fragment>
              <Filter refetch={refetch} filterData={data} />
              <ProductList products={data} />
            </Fragment>
          )
        }
      }}
    </Query>
  )
}

const { brands, types, suppliers, tags } = props.filterData
  const { refetch } = props

  const mutators = {
    setSelector: (args, state, utils) => {
      utils.changeValue(state, args[0].key, () => args[0].value)
    }
  }

  return (
    <ApolloConsumer>
      {client => (
        <div className="row mt-5 mb-5">
          <FinalForm
            onSubmit={async formValue => {
              // refetch({ input: formValue })
              const { data } = await client.query({
                query: GET_FILTER_QUERY,
                variables: { input: formValue }
              })

              // const stores = client.readQuery({ query: GET_PRODUCTS_QUERY })

              return client.writeQuery({
                query: GET_FILTER_QUERY,
                data: {
                  getfilterProducts: data.getfilterProducts
                }
              })
              // console.log(stores)
            }}
            mutators={mutators}
            render={({ handleSubmit, form, values }) => (
              <form onSubmit={handleSubmit} noValidate>
                <div className="filter-controll">
                  <div className="filter-control-options">
                    <ul className="sellect-group">
                      <li>
                        <SearchBox
                          onChange={e => {
                            form.mutators.setSelector({
                              key: 'text',
                              value: e.target.value
                            })
                          }}
                        />
                      </li>
                    </ul>
                    <ul className="sellect-group">
                      <li>
                        <Select
                          name="type"
                          classNamePrefix="fiter-select"
                          className="filter-select"
                          options={types}
                          placeholder="Product type"
                          isClearable
                          onChange={type => {
                            form.mutators.setSelector({
                              key: 'type',
                              value: type.value
                            })
                          }}
                        />
                      </li>
                    </ul>
                    <ul className="sellect-group">
                      <li>
                        <Select
                          classNamePrefix="fiter-select"
                          className="filter-select"
                          options={brands}
                          placeholder="All brands"
                          onChange={brand => {
                            form.mutators.setSelector({
                              key: 'brand',
                              value: brand.value
                            })
                          }}
                        />
                      </li>
                    </ul>
                    <ul className="sellect-group">
                      <li>
                        <Select
                          classNamePrefix="fiter-select"
                          className="filter-select"
                          options={suppliers}
                          placeholder="All suppliers"
                          onChange={supplier => {
                            form.mutators.setSelector({
                              key: 'supplier',
                              value: supplier.value
                            })
                          }}
                        />
                      </li>
                    </ul>
                    <ul className="sellect-group">
                      <li>
                        <Select
                          classNamePrefix="fiter-select"
                          className="filter-select"
                          options={tags}
                          placeholder="All tags"
                          isMulti
                          onChange={type => {
                            form.mutators.setSelector({
                              key: 'tags',
                              value: type.map(type => type.value)
                            })
                          }}
                        />
                      </li>
                    </ul>
                    <ul className="sellect-group ml-5x">
                      <li>
                        <Button type="submit">Apply filter</Button>
                      </li>
                    </ul>
                  </div>
                </div>
              </form>
            )}
          />
        </div>
      )}
    </ApolloConsumer>
  )
}