// @flow
import React, { useState } from 'react';
import styled from 'styled-components';
import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import { withInfo } from '@storybook/addon-info';
import { Select } from './index';
import { Option } from './option';
import { Button } from '../../actions/button';
import { Grid, GridItem } from '../../structures';
import { Box } from '../../../primitives/box';
import { configDocs } from '../../../../.storybook/config-docs';
import docs from './SELECT.mkd';

const TallBox = styled(Box)`
  height: 100%;
`;

const Decorator = (storyFn: () => *) => (
  <Grid>
    <GridItem sm={12} md={6} lg={4}>
      {storyFn()}
    </GridItem>
  </Grid>
);

type OnChangeHandler = (string | void) => void;
const withStorybookAction = (onChange: OnChangeHandler): OnChangeHandler => (
  value: string | void,
) => {
  action('onChange')(value);
  onChange(value);
};

const DEFAULT_PROPS = {
  label: 'Label',
  hideLabel: true,
  placeholder: 'Select something',
};

storiesOf('Core/Forms/Select', module)
  .addDecorator(Decorator)
  .addDecorator(withInfo(configDocs(docs, Select)))

  .add('normal', () => {
    const [value, setValue] = useState(undefined);

    return (
      <Select
        {...DEFAULT_PROPS}
        onChange={withStorybookAction(setValue)}
        value={value}
      >
        <Option value={1}>First option</Option>
        <Option value={2}>Second option</Option>
      </Select>
    );
  })
  .add('large', () => {
    const [value, setValue] = useState('1');

    return (
      <Select
        {...DEFAULT_PROPS}
        onChange={withStorybookAction(setValue)}
        value={value}
        large
      >
        <Option value={1}>First option</Option>
        <Option value={2}>Second option</Option>
      </Select>
    );
  })
  .add('normal, no placeholder', () => {
    const [value, setValue] = useState(undefined);

    return (
      <Select
        {...DEFAULT_PROPS}
        placeholder={undefined}
        onChange={withStorybookAction(setValue)}
        value={value}
      >
        <Option value={1}>First option</Option>
        <Option value={2}>Second option</Option>
      </Select>
    );
  })
  .add('disabled', () => {
    const [value, setValue] = useState(undefined);

    return (
      <Select
        disabled
        {...DEFAULT_PROPS}
        placeholder="You can't select something"
        onChange={withStorybookAction(setValue)}
        value={value}
      >
        <Option value={1}>First option</Option>
        <Option value={2}>Second option</Option>
      </Select>
    );
  })
  .add('disabled option', () => {
    const [value, setValue] = useState(undefined);

    return (
      <Select
        {...DEFAULT_PROPS}
        placeholder="Second option is disabled"
        onChange={withStorybookAction(setValue)}
        value={value}
      >
        <Option value={1}>First option</Option>
        <Option value={2} disabled>
          Second option
        </Option>
      </Select>
    );
  })
  .add('pre-selected value', () => {
    const [value, setValue] = useState('three');

    return (
      <Select
        {...DEFAULT_PROPS}
        placeholder="Select something"
        onChange={withStorybookAction(setValue)}
        value={value}
      >
        <Option value="one">One</Option>
        <Option value="two">Two</Option>
        <Option value="three">Three</Option>
      </Select>
    );
  })
  .add('error (bool)', () => {
    const [value, setValue] = useState(undefined);

    return (
      <Select
        {...DEFAULT_PROPS}
        error
        placeholder="Select something"
        onChange={withStorybookAction(setValue)}
        value={value}
      >
        <Option value={1}>First option</Option>
        <Option value={2}>Second option</Option>
      </Select>
    );
  })
  .add('with label', () => {
    const [value, setValue] = useState(undefined);

    return (
      <Select
        {...DEFAULT_PROPS}
        onChange={withStorybookAction(setValue)}
        value={value}
        hideLabel={false}
      >
        <Option value={1}>First option</Option>
        <Option value={2}>Second option</Option>
      </Select>
    );
  })
  .add('large with label', () => {
    const [value, setValue] = useState(undefined);

    return (
      <Select
        {...DEFAULT_PROPS}
        onChange={withStorybookAction(setValue)}
        value={value}
        hideLabel={false}
        large
      >
        <Option value={1}>First option</Option>
        <Option value={2}>Second option</Option>
      </Select>
    );
  })
  .add('Setting value to undefined', () => {
    const [value, setValue] = useState('A');

    return (
      <>
        <Select
          {...DEFAULT_PROPS}
          onChange={withStorybookAction(setValue)}
          value={value}
          hideLabel={false}
        >
          <Option value="A">A</Option>
          <Option value="B">B</Option>
          <Option value="C">C</Option>
        </Select>
        <TallBox stacked="row" align="end" justify="center">
          <Button
            onClick={() => {
              setValue(undefined);
            }}
          >
            Reset value to undefined
          </Button>
        </TallBox>
      </>
    );
  });
