// @flow
import React, { useState } from 'react';
import randomstring from 'randomstring';
import { remove, concat } from 'lodash';
import { action } from '@storybook/addon-actions';
import { Selector } from './index';
import { SelectorItem } from './selector-item';
import { Box } from '../../../primitives';
import { Text } from '../../typography';
import { SelectorItemWithInput } from './selector-item-with-input';
import { MarginChecker } from '../../../mixins/spacing/story-support/margin-checker';
import { StackeeChecker } from '../../../mixins/stackee/story-support/stackee-checker';
import docs from './selector.mdx';

export default {
  component: Selector,
  title: 'Forms/Selector',
  parameters: {
    docs: {
      page: docs,
    },
  },
};

const ExampleRow = () => (
  <Box stacked="column" spacing={['ph1', 'pt2']}>
    <Text bold spacing="mv0">
      CIBC Everyday Savings Account
    </Text>
    <Text fontSize="f1" spacing="mt1">
      Ending in 1234
    </Text>
  </Box>
);

export const WithLabel = () => {
  const demoId = `selector-demo-${randomstring.generate(2)}`;
  return (
    <Selector
      name={demoId}
      onChange={action('onChange')}
      label="Choose one"
      stateful
    >
      <SelectorItem id="option-one" label="First choice" value="option-one" />
      <SelectorItem id="option-two" label="Second choice" value="option-two" />
    </Selector>
  );
};

export const LargeHiddenLabel = () => {
  const demoId = `selector-demo-${randomstring.generate(2)}`;
  return (
    <Selector
      name={demoId}
      onChange={action('onChange')}
      stateful
      size="lg"
      label="Pick One"
      hideLabel
    >
      <SelectorItem id="option-one" label="First choice" value="option-one" />
      <SelectorItem id="option-two" label="Second choice" value="option-two" />
    </Selector>
  );
};

export const DisabledHiddenLabel = () => {
  const demoId = `selector-demo-${randomstring.generate(2)}`;
  return (
    <Selector
      name={demoId}
      onChange={action('onChange')}
      stateful
      label="Pick Something"
      hideLabel
    >
      <SelectorItem id="option-one" label="First choice" value="option-one" />
      <SelectorItem
        id="option-two"
        label="Second choice"
        value="option-two"
        disabled
      />
      <SelectorItem
        id="option-three"
        label="Third choice"
        value="option-three"
        disabled
        noInput
      />
    </Selector>
  );
};

export const CustomItemContent = () => {
  const demoId = `selector-demo-${randomstring.generate(2)}`;
  return (
    <Selector
      name={demoId}
      onChange={action('onChange')}
      stateful
      label="You can't see this"
      hideLabel
    >
      <SelectorItem
        id="option-one"
        value="option-one"
        label="option one"
        hideLabel
      >
        <ExampleRow />
      </SelectorItem>
      <SelectorItem
        id="option-two"
        value="option-two"
        label="option two"
        hideLabel
      >
        <ExampleRow />
      </SelectorItem>
    </Selector>
  );
};

export const SecondaryLabels = () => {
  const demoId = `selector-demo-${randomstring.generate(2)}`;
  return (
    <Selector
      name={demoId}
      onChange={action('onChange')}
      stateful
      label="Label for the selector"
    >
      <SelectorItem id="option-one" label="One" value={1} />
      <SelectorItem
        id="option-two"
        label="Two"
        secondaryLabel="Secondary"
        value={2}
      />
      <SelectorItem
        id="option-three"
        label="Three"
        secondaryLabel="Secondary label with a very long description"
        value={3}
      />
    </Selector>
  );
};

export const LargeAmountsOfText = () => {
  const demoId = `selector-demo-${randomstring.generate(2)}`;
  return (
    <Selector
      name={demoId}
      onChange={action('onChange')}
      stateful
      label="Some options"
      hideLabel
    >
      <SelectorItem
        id="option-one"
        value="option-one"
        label="A fancy bank name that is quite long"
        hideLabel
      >
        <Box stacked="column" spacing={['ph1', 'pt2']}>
          <Text bold spacing="mv0">
            A fancy bank name that is quite long
          </Text>
          <Text fontSize="f1" spacing="mt1">
            fake text fake text fake text fake text fake text fake text fake
            text fake text fake text fake text fake text
          </Text>
        </Box>
      </SelectorItem>
      <SelectorItem
        id="option-two"
        value="option-two"
        label="fake text fake text fake text fake text fake text fake text
                fake text fake text fake text fake text fake text"
      />
      <SelectorItem id="option-three" value="option-three" label="fake" />
    </Selector>
  );
};

export const FreeformTextItem = () => {
  const CheckedValuesForRadioDemo = () => {
    const demoId = `selector-demo-${randomstring.generate(2)}`;
    const [selected, setSelected] = useState('vanilla');
    const [inputValue, setInputValue] = useState();
    return (
      <Selector
        name={demoId}
        onChange={(v) => {
          setSelected(v);
          action('onChange')(v);
        }}
        label="With freeform text"
        hideLabel
      >
        <SelectorItem
          id="vanilla"
          label="🍦 Vanilla"
          value="vanilla"
          checked={selected === 'vanilla'}
        />
        <SelectorItem
          id="ice-cream-chocolate"
          label="🍫 Chocolate"
          value="chocolate"
          checked={selected === 'chocolate'}
        />
        <SelectorItemWithInput
          id="other"
          label="Other (written below)"
          value="other"
          checked={selected === 'other'}
          inputValue={inputValue}
          onInputChange={(value) => {
            action('onInputChange');
            setInputValue(value);
          }}
          inputProps={{
            placeholder: 'Something delicious',
          }}
        />
      </Selector>
    );
  };

  return <CheckedValuesForRadioDemo />;
};

export const FreeformTextItemError = () => {
  const CheckedValuesForRadioDemo = () => {
    const demoId = `selector-demo-${randomstring.generate(2)}`;
    const [selected, setSelected] = useState('vanilla');
    const [inputValue, setInputValue] = useState('Something that is not valid');
    return (
      <Selector
        name={demoId}
        onChange={(v) => {
          setSelected(v);
          action('onChange')(v);
        }}
        label="With error on selector"
        hideLabel
      >
        <SelectorItem
          id="vanilla"
          label="🍦 Vanilla"
          value="vanilla"
          checked={selected === 'vanilla'}
        />
        <SelectorItem
          id="ice-cream-chocolate"
          label="🍫 Chocolate"
          value="chocolate"
          checked={selected === 'chocolate'}
        />
        <SelectorItemWithInput
          id="other"
          label="Other (written below)"
          value="other"
          checked={selected === 'other'}
          inputValue={inputValue}
          onInputChange={(value) => {
            action('onInputChange');
            setInputValue(value);
          }}
          inputProps={{
            placeholder: 'Something delicious',
          }}
          inputError="Input value is invalid"
        />
      </Selector>
    );
  };

  return <CheckedValuesForRadioDemo />;
};

export const Small = () => {
  const CheckedValuesForCheckboxDemo = () => {
    const demoId = `selector-demo-${randomstring.generate(2)}`;
    const [selected, setSelected] = useState(['chocolate', 'vanilla']);

    return (
      <Selector
        name={demoId}
        type="checkbox"
        size="sm"
        onChange={(v) => {
          if (selected.includes(v)) {
            const newSelected = remove(selected, (item) => v !== item);
            setSelected(newSelected);
          } else {
            const newSelected = concat(selected, v);
            setSelected(newSelected);
          }

          action('onChange')(Array.isArray(v) ? v.join(', ') : v);
        }}
        label="Small"
        hideLabel
      >
        <SelectorItem
          id="chocolate"
          label="Chocolate"
          value="chocolate"
          checked={selected.includes('chocolate')}
        />
        <SelectorItem
          id="vanilla"
          label="Vanilla"
          value="vanilla"
          checked={selected.includes('vanilla')}
        />
        <SelectorItem
          id="strawberry"
          label="Strawberry"
          value="strawberry"
          checked={selected.includes('strawberry')}
        />
      </Selector>
    );
  };

  return <CheckedValuesForCheckboxDemo />;
};

export const Checkboxes = () => {
  const demoId = `selector-demo-${randomstring.generate(2)}`;
  return (
    <Selector
      name={demoId}
      type="checkbox"
      onChange={(v) => {
        action('onChange')(Array.isArray(v) ? v.join(', ') : v);
      }}
      label="Choose one"
      stateful
    >
      <SelectorItem id="option-one" label="First choice" value="option-one" />
      <SelectorItem id="option-two" label="Second choice" value="option-two" />
    </Selector>
  );
};

export const MixinsMarginOnlySpacing = () => (
  <MarginChecker
    Component={Selector}
    name="margin demo"
    type="checkbox"
    onChange={(v) => {
      action('onChange')(Array.isArray(v) ? v.join(', ') : v);
    }}
    label="Choose one"
  >
    <SelectorItem id="option-one" label="First choice" value="option-one" />
    <SelectorItem id="option-two" label="Second choice" value="option-two" />
  </MarginChecker>
);

export const MixinsStackee = () => (
  <StackeeChecker
    Component={Selector}
    name="stackee demo"
    type="checkbox"
    onChange={(v) => {
      action('onChange')(Array.isArray(v) ? v.join(', ') : v);
    }}
    label="Choose one"
  >
    <SelectorItem id="option-one" label="First choice" value="option-one" />
    <SelectorItem id="option-two" label="Second choice" value="option-two" />
  </StackeeChecker>
);
