// @flow
import React, { useState } from 'react';
import { ListSelector } from './list-selector.component';
import { MarginChecker } from '../../../mixins/spacing/story-support/margin-checker';
import { PaddingChecker } from '../../../mixins/spacing/story-support/padding-checker';
import { StackeeChecker } from '../../../mixins/stackee/story-support/stackee-checker';
import { Box } from '../../../primitives/box';
import { Text } from '../../typography/text';
import { Span } from '../../typography/span';
import { TextInput } from '../text-input';
import { ChevronDown } from '../../icon';
import { UnstyledButton } from '../../behaviors/unstyled-button';

import docs from './list-selector.mdx';

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

const items = [
  { id: 'APPLE', label: 'Apple' },
  { id: 'PEAR', label: 'Pear' },
  { id: 'EGGPLANT', label: 'Yucky eggplant', disabled: true },
  { id: 'KIWI', label: 'Kiwi' },
];

const taxonomicalNames = {
  APPLE: 'Malus domestica',
  PEAR: 'Pyrus communis',
  EGGPLANT: 'Solanium melongena',
  KIWI: 'Actinidia deliciosa',
};

type DemoSelectionSummaryProps<T> = {
  selectedIds: T[],
  customValue?: string,
};
const DemoSelectionSummary = <T>({
  selectedIds,
  customValue = '',
}: DemoSelectionSummaryProps<T>) => {
  return (
    <Text aria-live="polite" bold spacing="mt1" colorName="greyscale-dark">
      {selectedIds.length > 0 && (
        <span>
          You selected{' '}
          {selectedIds
            .map((id) => (id === 'CUSTOM' ? `CUSTOM(${customValue})` : id))
            .join()}
        </span>
      )}
    </Text>
  );
};

export const Single = () => {
  const [selectedIds, setSelectedIds] = useState([]);
  return (
    <>
      <ListSelector
        label="Favorite Fruit"
        items={items}
        name="favorite-fruit-single"
        value={selectedIds}
        onChange={setSelectedIds}
      />
      <DemoSelectionSummary selectedIds={selectedIds} />
    </>
  );
};

export const Multiple = () => {
  const [selectedIds, setSelectedIds] = useState([]);
  return (
    <>
      <ListSelector
        label="Favorite Fruit"
        items={items}
        name="favorite-fruit-multi"
        multiSelect
        value={selectedIds}
        onChange={setSelectedIds}
      />
      <DemoSelectionSummary selectedIds={selectedIds} />
    </>
  );
};

export const LargeSingle = () => {
  const [selectedIds, setSelectedIds] = useState([]);
  const customItems = items.map((item) => ({
    ...item,
    label: (
      <Box spacing={['ph1', 'pv2']}>
        <Span
          bold
          colorName={item.disabled ? 'greyscale-dark' : 'greyscale-black'}
          fontSize="f2"
        >
          {item.label}
        </Span>
      </Box>
    ),
  }));

  return (
    <>
      <ListSelector
        label="Favorite Fruit"
        items={customItems}
        name="favorite-fruit-large-single"
        value={selectedIds}
        onChange={setSelectedIds}
      />
      <DemoSelectionSummary selectedIds={selectedIds} />
    </>
  );
};

export const LargeMultiple = () => {
  const [selectedIds, setSelectedIds] = useState([]);
  const customItems = items.map((item) => ({
    ...item,
    label: (
      <Box spacing={['ph1', 'pv2']}>
        <Span
          bold
          colorName={item.disabled ? 'greyscale-dark' : 'greyscale-black'}
          fontSize="f2"
        >
          {item.label}
        </Span>
      </Box>
    ),
  }));

  return (
    <>
      <ListSelector
        label="Favorite Fruit"
        items={customItems}
        name="favorite-fruit-large-multiple"
        value={selectedIds}
        onChange={setSelectedIds}
        multiSelect
      />
      <DemoSelectionSummary selectedIds={selectedIds} />
    </>
  );
};

export const CustomItemsSingle = () => {
  const [selectedIds, setSelectedIds] = useState([]);
  const customItems = items
    .map((item) => ({
      ...item,
      label: (
        <Box spacing={['ph2', 'pt2']}>
          <Text
            bold
            spacing="mv0"
            colorName={item.disabled ? 'greyscale-dark' : 'greyscale-black'}
          >
            {item.label}
          </Text>
          <Text
            fontSize="f1"
            spacing="mt1"
            italic
            colorName={item.disabled ? 'greyscale-dark' : 'greyscale-black'}
          >
            {taxonomicalNames[String(item.id)]}
          </Text>
        </Box>
      ),
    }))
    .concat({
      id: 'nonOptionRow',
      isNonOptionRow: true,
      label: (
        <UnstyledButton
          stacked="row"
          grow={1}
          justify="space-between"
          align="center"
          insetFocus
          spacing={['pv2', 'pl4', 'pr1']}
        >
          <Text spacing="m0" bold fontSize="f1">
            Show more
          </Text>
          <ChevronDown />
        </UnstyledButton>
      ),
    });

  return (
    <>
      <ListSelector
        label="Favorite Fruit"
        items={customItems}
        name="favorite-fruit-custom-single"
        value={selectedIds}
        onChange={setSelectedIds}
      />
      <DemoSelectionSummary selectedIds={selectedIds} />
    </>
  );
};

export const CustomItemsMultiple = () => {
  const [selectedIds, setSelectedIds] = useState([]);
  const customItems = items.map((item) => ({
    ...item,
    label: (
      <Box spacing={['ph2', 'pt2']}>
        <Text
          bold
          spacing="mv0"
          colorName={item.disabled ? 'greyscale-dark' : 'greyscale-black'}
        >
          {item.label}
        </Text>
        <Text
          fontSize="f1"
          spacing="mt1"
          italic
          colorName={item.disabled ? 'greyscale-dark' : 'greyscale-black'}
        >
          {taxonomicalNames[String(item.id)]}
        </Text>
      </Box>
    ),
  }));

  return (
    <>
      <ListSelector
        label="Favorite Fruit"
        items={customItems}
        name="favorite-fruit-custom-multiple"
        value={selectedIds}
        onChange={setSelectedIds}
        multiSelect
      />
      <DemoSelectionSummary selectedIds={selectedIds} />
    </>
  );
};

export const SecondaryTextSingle = () => {
  const [selectedIds, setSelectedIds] = useState([]);
  const customItems = items.map((item) => ({
    ...item,
    label: (
      <Box spacing="pv1" stacked="row" justify="space-between" grow={1}>
        <Span colorName={item.disabled ? 'greyscale-dark' : 'greyscale-black'}>
          {item.label}
        </Span>
        <Span
          colorName={item.disabled ? 'greyscale-dark' : 'greyscale-black'}
          spacing="pr2"
        >
          {taxonomicalNames[String(item.id)]}
        </Span>
      </Box>
    ),
  }));

  return (
    <>
      <ListSelector
        label="Favorite Fruit"
        items={customItems}
        name="favorite-fruit-secondary-single"
        value={selectedIds}
        onChange={setSelectedIds}
      />
      <DemoSelectionSummary selectedIds={selectedIds} />
    </>
  );
};

export const SecondaryTextMultiple = () => {
  const [selectedIds, setSelectedIds] = useState([]);
  const customItems = items.map((item) => ({
    ...item,
    label: (
      <Box spacing="pv1" stacked="row" justify="space-between" grow={1}>
        <Span colorName={item.disabled ? 'greyscale-dark' : 'greyscale-black'}>
          {item.label}
        </Span>
        <Span
          colorName={item.disabled ? 'greyscale-dark' : 'greyscale-black'}
          spacing="pr2"
        >
          {taxonomicalNames[String(item.id)]}
        </Span>
      </Box>
    ),
  }));

  return (
    <>
      <ListSelector
        label="Favorite Fruit"
        items={customItems}
        name="favorite-fruit-secondary-multiple"
        value={selectedIds}
        onChange={setSelectedIds}
      />
      <DemoSelectionSummary selectedIds={selectedIds} />
    </>
  );
};

export const FreeFormSingle = () => {
  const [selectedIds, setSelectedIds] = useState([]);
  const [customValue, setCustomValue] = useState();

  const itemsWithFreeForm = items.concat({
    id: 'CUSTOM',
    label: (
      <Box spacing="mv1" grow={1}>
        <Text aria-hidden spacing="m0">
          Other (written below)
        </Text>
        <TextInput
          hideBorder
          label="Other (written below)"
          hideLabel
          placeholder="Something delicious"
          onChange={setCustomValue}
          value={customValue}
        />
      </Box>
    ),
  });

  return (
    <>
      <ListSelector
        label="Favorite Fruit"
        items={itemsWithFreeForm}
        name="favorite-fruit-free-form-single"
        value={selectedIds}
        onChange={setSelectedIds}
      />
      <DemoSelectionSummary selectedIds={selectedIds} />
    </>
  );
};

export const FreeFormMultiple = () => {
  const [selectedIds, setSelectedIds] = useState([]);
  const [customValue, setCustomValue] = useState();

  const itemsWithFreeForm = items.concat({
    id: 'CUSTOM',
    label: (
      <Box spacing="mv1" grow={1}>
        <Text aria-hidden spacing="m0">
          Other (written below)
        </Text>
        <TextInput
          hideBorder
          label="Other (written below)"
          hideLabel
          placeholder="Something delicious"
          onChange={setCustomValue}
          value={customValue}
        />
      </Box>
    ),
  });

  return (
    <>
      <ListSelector
        label="Favorite Fruit"
        items={itemsWithFreeForm}
        name="favorite-fruit-free-form-multi"
        multiSelect
        value={selectedIds}
        onChange={setSelectedIds}
      />
      <DemoSelectionSummary selectedIds={selectedIds} />
    </>
  );
};

export const MixinsSpacing = () => (
  <>
    <MarginChecker
      Component={ListSelector}
      label="Favorite Fruit"
      name="mixins-spacing"
      items={[items[0]]}
      value={[]}
    />
    <PaddingChecker
      Component={ListSelector}
      label="Favorite Fruit"
      items={[items[0]]}
      value={[]}
    />
  </>
);

export const MixinsStackee = () => (
  <StackeeChecker
    Component={ListSelector}
    label="Favorite Fruit"
    name="mixins-stackee"
    items={[items[0]]}
    value={[]}
  />
);
