// @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 { Message } from '../../feedback-ui/message';
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,
    },
  },
};

export const Preview = () => {
  const [value, setValue] = useState(undefined);

  return (
    <Select
      label="Choose one"
      placeholder="Sample option"
      onChange={setValue}
      value={value}
    >
      <Option value={1}>First option</Option>
      <Option value={2}>Second option</Option>
    </Select>
  );
};

export const Default = () => {
  const [value, setValue] = useState(undefined);

  return (
    <>
      <Select
        label="Choose one"
        placeholder="Sample option"
        onChange={setValue}
        value={value}
      >
        <Option value={1}>First option</Option>
        <Option value={2}>Second option</Option>
      </Select>

      <Message level={value == null ? 'error' : 'success'} spacing="mt2">
        Selected value: {String(value)}
      </Message>
    </>
  );
};

export const Large = () => {
  const [value, setValue] = useState(1);

  return (
    <>
      <Select
        label="Choose one"
        placeholder="Sample option"
        onChange={setValue}
        value={value}
        large
      >
        <Option value={1}>First option</Option>
        <Option value={2}>Second option</Option>
      </Select>

      <Message level={value == null ? 'error' : 'success'} spacing="mt2">
        Selected value: {String(value)}
      </Message>
    </>
  );
};

export const NormalNoPlaceholder = () => {
  const [value, setValue] = useState(1);

  return (
    <>
      <Select label="Choose one" onChange={setValue} value={value}>
        <Option value={1}>First option</Option>
        <Option value={2}>Second option</Option>
      </Select>

      <Message level={value == null ? 'error' : 'success'} spacing="mt2">
        Selected value: {String(value)}
      </Message>
    </>
  );
};

export const Disabled = () => {
  const [value, setValue] = useState(undefined);

  return (
    <Select
      disabled
      label="Choose one"
      placeholder="Sample option"
      onChange={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
        label="Choose one"
        placeholder="Sample option"
        onChange={setValue}
        value={value}
      >
        <Option value={1}>First option</Option>
        <Option value={2} disabled>
          Second option
        </Option>
      </Select>

      <Message level={value == null ? 'error' : 'success'} spacing="mt2">
        Selected value: {String(value)}
      </Message>
    </>
  );
};

type OptionValue = 'one' | 'two' | 'three' | typeof undefined;

export const PreSelectedValue = () => {
  const initialValue: OptionValue = 'three';
  const [value, setValue] = useState(initialValue);

  return (
    <>
      <Select
        label="Choose one"
        placeholder="Sample option"
        onChange={setValue}
        value={value}
      >
        <Option value="one">One</Option>
        <Option value="two">Two</Option>
        <Option value="three">Three</Option>
      </Select>

      <Message level={value == null ? 'error' : 'success'} spacing="mt2">
        Selected value: {String(value)}
      </Message>
    </>
  );
};

export const ErrorBool = () => {
  const [value, setValue] = useState(undefined);

  return (
    <>
      <Select
        label="Choose one"
        placeholder="Sample option"
        error
        onChange={setValue}
        value={value}
      >
        <Option value={1}>First option</Option>
        <Option value={2}>Second option</Option>
      </Select>

      <Message level={value == null ? 'error' : 'success'} spacing="mt2">
        Selected value: {String(value)}
      </Message>
    </>
  );
};

export const HideLabel = () => {
  const [value, setValue] = useState(undefined);

  return (
    <>
      <Select
        label="Choose one"
        placeholder="Sample option"
        onChange={setValue}
        value={value}
        hideLabel
      >
        <Option value={1}>First option</Option>
        <Option value={2}>Second option</Option>
      </Select>

      <Message level={value == null ? 'error' : 'success'} spacing="mt2">
        Selected value: {String(value)}
      </Message>
    </>
  );
};

export const LargeHideLabel = () => {
  const [value, setValue] = useState(undefined);

  return (
    <>
      <Select
        label="Choose one"
        placeholder="Sample option"
        hideLabel
        onChange={setValue}
        value={value}
        large
      >
        <Option value={1}>First option</Option>
        <Option value={2}>Second option</Option>
      </Select>

      <Message level={value == null ? 'error' : 'success'} spacing="mt2">
        Selected value: {String(value)}
      </Message>
    </>
  );
};

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

  return (
    <>
      <Box stacked="row" align="center" justify="start">
        <Select
          label="Choose one"
          placeholder="Sample option"
          onChange={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"
        >
          Clear
        </TertiaryButton>
      </Box>

      <Message level={value == null ? 'error' : 'success'} spacing="mt2">
        Selected value: {String(value)}
      </Message>
    </>
  );
};

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

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