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

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

const storyOnChange = (onChange: *) => (selectValue: *) => {
  action('onChange')(selectValue);
  onChange(selectValue);
};

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

storiesOf('Core/Forms/Select', module)
  .addDecorator(Decorator)
  .add(
    'normal',
    withDocs(docs)(() => {
      const [value, onChange] = useState<string | void>(undefined);

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

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

      return (
        <Select
          {...DEFAULT_PROPS}
          placeholder={undefined}
          onChange={storyOnChange(onChange)}
          value={value}
        >
          <Option value={1}>First option</Option>
          <Option value={2}>Second option</Option>
        </Select>
      );
    }),
  )
  .add(
    'disabled',
    withDocs(docs)(() => {
      const [value, onChange] = useState<string | void>(undefined);

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

      return (
        <Select
          {...DEFAULT_PROPS}
          placeholder="Second option is disabled"
          onChange={storyOnChange(onChange)}
          value={value}
        >
          <Option value={1}>First option</Option>
          <Option value={2} disabled>
            Second option
          </Option>
        </Select>
      );
    }),
  )
  .add(
    'pre-selected value',
    withDocs(docs)(() => {
      const [value, onChange] = useState<string | void>(undefined);

      return (
        <Select
          {...DEFAULT_PROPS}
          placeholder="Select something"
          defaultValue="three"
          onChange={storyOnChange(onChange)}
          value={value}
        >
          <Option value="one">One</Option>
          <Option value="two">Two</Option>
          <Option value="three">Three</Option>
        </Select>
      );
    }),
  )
  .add(
    'error (bool)',
    withDocs(docs)(() => {
      const [value, onChange] = useState<string | void>(undefined);

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

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

      return (
        <Select
          {...DEFAULT_PROPS}
          onChange={storyOnChange(onChange)}
          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={storyOnChange(setValue)}
          value={value}
          hideLabel={false}
        >
          <Option value="A">A</Option>
          <Option value="B">B</Option>
          <Option value="C">C</Option>
        </Select>
        <Box
          stacked="row"
          align="end"
          justify="center"
          style={{ height: '100%' }}
        >
          <Button
            onClick={() => {
              setValue(undefined);
            }}
          >
            Reset value to undefined
          </Button>
        </Box>
      </>
    );
  });
