// @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 { PaddingChecker } from '../../../mixins/spacing/story-support/padding-checker';
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(1);

  return (
    <Select
      label="Choose one"
      placeholder="Sample option"
      onChange={setValue}
      value={value}
    >
      <Option value={1}>quantum pendulum graph</Option>
    </Select>
  );
};

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

  return (
    <Select
      label="Choose one"
      onChange={setValue}
      value={value}
      success={value != null ? `Selected value: ${String(value)}` : undefined}
      description={value == null ? 'A sample select field' : undefined}
    >
      <Option value={1}>First option</Option>
      <Option value={2}>Second option</Option>
    </Select>
  );
};

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

  return (
    <Select
      disabled
      label="Choose one"
      placeholder="Sample option"
      onChange={setValue}
      value={value}
      success={value != null ? `Selected value: ${String(value)}` : undefined}
      description={value == null ? 'A sample select field' : undefined}
    >
      <Option value={1}>First option</Option>
      <Option value={2}>Second option</Option>
    </Select>
  );
};

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

  return (
    <Select
      disabled
      label="Choose one"
      placeholder="Sample option"
      onChange={setValue}
      value={value}
      success={value != null ? `Selected value: ${String(value)}` : undefined}
      description={value == null ? 'A sample select field' : undefined}
    >
      <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>
  );
};

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}
      success={value != null ? `Selected value: ${String(value)}` : undefined}
      description={value == null ? 'A sample select field' : undefined}
    >
      <Option value="one">One</Option>
      <Option value="two">Two</Option>
      <Option value="three">Three</Option>
    </Select>
  );
};

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

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

export const ErrorMessage = () => {
  const [value, setValue] = useState(2);

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

export const SuccessMessage = () => {
  const [value, setValue] = useState(2);

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

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

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

export const ExternalLabel = () => {
  const [value, setValue] = useState(2);

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

export const ExternalLargeLabel = () => {
  const [value, setValue] = useState(2);

  return (
    <Select
      label="Choose one"
      labelStyle="external-large"
      placeholder="Sample option"
      success="Success message"
      onChange={setValue}
      value={value}
    >
      <Option value={1}>First option</Option>
      <Option value={2}>Second option</Option>
    </Select>
  );
};

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

  return (
    <Box stacked="row">
      <Select
        basis={300}
        label="Choose one"
        placeholder="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus lacinia mi sit amet nunc viverra lacinia."
        success="Success message"
        onChange={setValue}
        value={value}
        focusOnMount
      >
        <Option value={1}>First option</Option>
        <Option value={2}>Second option</Option>
      </Select>
    </Box>
  );
};

export const LongSelectedValue = () => {
  const [value, setValue] = useState(2);

  return (
    <Box stacked="row">
      <Select
        basis={300}
        label="Choose one"
        placeholder="Sample option"
        success="Success message"
        onChange={setValue}
        value={value}
      >
        <Option value={1}>First option</Option>
        <Option value={2}>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus
          lacinia mi sit amet nunc viverra lacinia.
        </Option>
      </Select>
    </Box>
  );
};

export const LongSelectedValueWithIcon = () => {
  const [value, setValue] = useState(2);

  return (
    <Box stacked="row">
      <Select
        basis={300}
        label="Choose one"
        placeholder="Sample option"
        success="Success message"
        onChange={setValue}
        value={value}
        error
      >
        <Option value={1}>First option</Option>
        <Option value={2}>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus
          lacinia mi sit amet nunc viverra lacinia.
        </Option>
      </Select>
    </Box>
  );
};

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

  return (
    <Box stacked="row">
      <Select
        basis={300}
        label="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus lacinia mi sit amet nunc viverra lacinia."
        onChange={setValue}
        value={value}
      >
        <Option value={1}>First option</Option>
        <Option value={2}>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus
          lacinia mi sit amet nunc viverra lacinia.
        </Option>
      </Select>
    </Box>
  );
};

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}
        grow={1}
        success={value != null ? `Selected value: ${String(value)}` : undefined}
        description={value == null ? 'A sample select field' : undefined}
      >
        <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>
  );
};

export const MixinsSpacing = () => (
  <>
    <PaddingChecker
      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>
    </PaddingChecker>
    <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>
);
