// @flow
import React from 'react';
import { FormattedMessage } from 'react-intl';
import { action } from '@storybook/addon-actions';
import { ClickableList } from './clickable-list.component';
import { SearchIcon } from '../../icon';
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 docs from './clickable-list.mdx';

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

const options = [
  {
    id: 'employed',
    text: 'Employed',
  },
  {
    id: 'self-employed',
    text: 'Self-employed',
  },
  {
    id: 'retired',
    text: 'Retired',
  },
  {
    id: 'disabled',
    text: 'Disabled',
    disabled: true,
  },
  {
    id: 'with-image',
    text: 'With Image',
    icon: {
      imgSrc:
        'https://s3.amazonaws.com/bank-verification-ui/institution-logos/scotiabank.png',
      altText: 'scotiabank logo',
    },
  },
  {
    id: 'with-icon',
    text: 'With Icon',
    icon: {
      imgSrc: <SearchIcon />,
      altText: 'search',
      backgroundColor: 'greyscale-light',
    },
  },
  {
    id: 'translated',
    text: <FormattedMessage id="test" />,
  },
];

export const Default = () => (
  <ClickableList
    label="Choose one"
    options={options}
    onClick={action('onClick')}
  />
);

export const Disabled = () => (
  <ClickableList
    label="Choose one"
    options={options}
    onClick={action('onClick')}
    disabled
  />
);

export const MixinsSpacing = () => (
  <>
    <MarginChecker
      Component={ClickableList}
      label="Choose one"
      options={options.slice(0, 2)}
      onClick={action('onClick')}
    />
    <PaddingChecker
      Component={ClickableList}
      label="Choose one"
      options={options.slice(0, 2)}
      onClick={action('onClick')}
    />
  </>
);

export const MixinsStackee = () => (
  <StackeeChecker
    Component={ClickableList}
    label="Choose one"
    options={[
      { id: '1', text: 'One' },
      { id: '2', text: 'Two' },
    ]}
    onClick={action('onClick')}
  />
);
