import * as React from "react"
import { storiesOf } from "@storybook/react"
import { withNotes } from "@storybook/addon-notes"
import { MockedProvider } from "react-apollo/test-utils"
import SearchTextInput, { SEARCH_SUGGESTION_QUERY } from "../SearchTextInput"
import theme from "../../theme"
import { provider } from "jamplay-common/client"

const GRAPHQL_URL = "http://localhost:3991/graphql-search"

const mocks = [
  {
    request: {
      query: SEARCH_SUGGESTION_QUERY,
      variables: {
        value: "test"
      }
    },
    result: require("./search-result-data.json")
  },
  {
    request: {
      query: SEARCH_SUGGESTION_QUERY,
      variables: {
        value: "bes"
      }
    },
    result: require("./search-result-data-2.json")
  }
]

storiesOf("SearchTextInput", module)
  .add(
    "search for test",
    withNotes(`
    # SearchTextInput
  `)(() => {
      return (
        <MockedProvider mocks={mocks} addTypename={false}>
          <div>
            <SearchTextInput autoFocus={true} forceFocus />
          </div>
        </MockedProvider>
      )
    })
  )

const SearchwithRemote = provider({
  uri: "http://somewhere/graphql",
  theme,
  services: [
    {
      name: "search",
      uri: GRAPHQL_URL
    }
  ]
})(SearchTextInput as any)

storiesOf("SearchTextInput", module).add("search with remote endpoint", () => {
  return <SearchwithRemote autoFocus forceFocus/>
})