// @flow
import React, { useState } from 'react';
import { action } from '@storybook/addon-actions';
import { Select } from './select.component';
import { Option } from './option';
import { Box } from '../../../primitives';
import { TertiaryButton } from '../../actions';
import { MarginChecker } from '../../../mixins/spacing/story-support/margin-checker';
import { StackeeChecker } from '../../../mixins/stackee/story-support/stackee-checker';
import docs from './select.mdx';

export default {
  component: Select,
  title: 'Components/Inputs/Select',
  parameters: {
    docs: {
      page: docs,
    },
  },
};

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',
};

export const Default = () => {
  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>
  );
};

export const 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>
  );
};

export const NormalNoPlaceholder = () => {
  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>
  );
};

export const 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>
  );
};

export const DisabledOption = () => {
  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>
  );
};

export const PreSelectedValue = () => {
  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>
  );
};

export const ErrorBool = () => {
  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>
  );
};

export const WithLabel = () => {
  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>
  );
};

export const LargeWithLabel = () => {
  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>
  );
};

export const UndefinedValue = () => {
  const [value, setValue] = useState('A');

  return (
    <Box stacked="row" align="center" justify="start">
      <Select
        {...DEFAULT_PROPS}
        onChange={withStorybookAction(setValue)}
        value={value}
        hideLabel
        grow={1}
      >
        <Option value="A">A</Option>
        <Option value="B">B</Option>
        <Option value="C">C</Option>
      </Select>
      <TertiaryButton
        onClick={() => {
          setValue(undefined);
        }}
        spacing="ml1"
      >
        Reset value to undefined
      </TertiaryButton>
    </Box>
  );
};

export const MixinsMarginOnlySpacing = () => (
  <MarginChecker
    Component={Select}
    {...DEFAULT_PROPS}
    onChange={action('onChange')}
    value={undefined}
  >
    <Option value="A">A</Option>
    <Option value="B">B</Option>
    <Option value="C">C</Option>
  </MarginChecker>
);

export const MixinsStackee = () => (
  <StackeeChecker
    Component={Select}
    {...DEFAULT_PROPS}
    onChange={action('onChange')}
    value={undefined}
  >
    <Option value="A">A</Option>
    <Option value="B">B</Option>
    <Option value="C">C</Option>
  </StackeeChecker>
);
