import * as React from "react"
import Dropdown from "../Dropdown"
import { withState } from "recompose"

import { storiesOf } from "@storybook/react"

const ProvinceInput = ({ value, setValue }) => {
  return (
    <div>
      <Dropdown
        value={value}
        options={[
          {
            value: "chonburi",
            label: "ชลบุรี"
          },
          {
            value: "bkk",
            label: "กทม"
          }
        ]}
        onChange={setValue}
      />
    </div>
  )
}

const withProvinceData = withState("value", "setValue", "chonburi")
const ProvinceInputwithProvinceData = withProvinceData(ProvinceInput)

class ProvinceInputStateful extends React.Component<{}, { value: string }> {
  constructor(props) {
    super(props)
    this.state = {
      value: "bkk"
    }
  }
  public render() {
    return (
      <ProvinceInput
        value={this.state.value}
        // tslint:disable-next-line:jsx-no-lambda
        setValue={(value) => this.setState({ value })}
      />
    )
  }
}

storiesOf("Dropdown input", module)
  .add("Basic dropdown", () => {
    return <ProvinceInputwithProvinceData />
  })
  .add("Dropdown stateful", () => {
    return <ProvinceInputStateful />
  })