import * as React from "react"
import { storiesOf } from "@storybook/react"
import styled from "styled-components"
import * as common from "jamplay-common/client"
import { theme } from "../.."
import NavBar, { paddingTop } from "."
import NotificationMock from "./NotificationMock"
import Provider from "./Provider"
import UserCard from "./UserInfo/UserCard"
import UserInfo from "./UserInfo/component"

const LayoutContainer = styled.div`
  ${paddingTop};
`
const notification = "https://staging-notification.jamplay.world"
const providerOptions = {
  uri: "http://localhost:8080",
  theme,
  services: [
    {
      name: "nap",
      uri: "http://localhost:3000/graphql"
    },
    {
      name: "notification",
      uri: notification + "/graphql"
    }
  ]
}

@common.provider(providerOptions)
class AuthenProvider extends React.Component {
  public render() {
    return this.props.children
  }
}

// tslint:disable-next-line:max-classes-per-file
@common.provider(Object.assign({}, providerOptions, { getToken: () => null }))
class GuestProvider extends React.Component {
  public render() {
    return this.props.children
  }
}

storiesOf("NavigationBar/NotificationMock", module)
  .addDecorator((story) => <AuthenProvider>{story()}</AuthenProvider>)
  .add("withService", () => <NotificationMock />)

storiesOf("NavigationBar/Guest", module)
  .addDecorator((story) => <GuestProvider>{story()}</GuestProvider>)
  .add("Navbar", () => (
    <NavBar
      streamUrl={notification}
      context={{
        SEARCH_GRAPHQL_URI: "http://localhost:3991/graphql-search",
        url: { query: {} }
      }}
    />
  ))
  .add("with fix position", () => (
    <LayoutContainer>
      <NavBar
        streamUrl={notification}
        style={{ position: "fixed", top: 0, width: "100%" }}
      />
      {"                                                    "
        .split("")
        // tslint:disable-next-line:jsx-key
        .map((x, idx) => <div>test</div>)}
    </LayoutContainer>
  ))

// tslint:disable-next-line:max-classes-per-file
class Toggle extends React.Component {
  public state = {
    show: true
  }
  public render() {
    return (
      <div>
        {/* tslint:disable-next-line:jsx-no-lambda */}
        <button onClick={() => this.setState({ show: !this.state.show })}>
          toggle
        </button>
        {this.state.show ? <NavBar streamUrl={notification} /> : null}
      </div>
    )
  }
}

storiesOf("NavigationBar/WithAuthen", module)
  .addDecorator((story) => <AuthenProvider>{story()}</AuthenProvider>)
  .add("navbar", () => (
    <div>
      <Toggle />
    </div>
  ))

  .add("user info with cache", () => (
    <Provider>
      <UserInfo
        loading={true}
        user={{
          _id: "1",
          name: "Test abcdef",
          email: "tes@a.a",
          ewallet: {
            silver: 1000,
            gold: 0
          },
          bookCount: 0,
          first_name: "first",
          last_name: "last",
          isEditor: true,
          authors: []
        }}
      />
    </Provider>
  ))
  .add("user info", () => (
    <Provider>
      <UserInfo
        loading={false}
        user={{
          _id: "1",
          name: "Test abcdef",
          email: "tes@a.a",
          ewallet: {
            silver: 1000,
            gold: 0
          },
          bookCount: 0,
          first_name: "first",
          last_name: "last",
          isEditor: true,
          authors: []
        }}
      />
    </Provider>
  ))
  .add("user card", () => (
    <Provider>
      <UserCard
        loading={false}
        user={{
          _id: "1",
          name: "Test abcdef",
          email: "tes@a.a",
          ewallet: {
            silver: 1000,
            gold: 0
          },
          bookCount: 0,
          first_name: "first",
          last_name: "last",
          isEditor: true,
          authors: []
        }}
      />
    </Provider>
  ))