// @flow
import React from 'react';
import type { Node } from 'react';
import { FormattedMessage } from 'react-intl';
import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import { withInfo } from '@storybook/addon-info';
import { ClickableList } from './index';
import { configDocs } from '../../../../.storybook/config-docs';
import { Grid, GridItem } from '../../structures';
import docs from './CLICKABLE_LIST.mkd';
import { SearchIcon } from '../../icon';

const Decorator = ({ children }: { children: Node }) => (
  <Grid>
    <GridItem sm={4} md={4} lg={4}>
      {children}
    </GridItem>
  </Grid>
);

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" />,
  },
];

storiesOf('Core/Forms/ClickableList', module)
  .addDecorator(withInfo(configDocs(docs, ClickableList)))
  .add('normal', () => (
    <Decorator>
      <ClickableList
        label="Choose one"
        options={options}
        onClick={action('onClick')}
      />
    </Decorator>
  ))
  .add('disabled', () => (
    <Decorator>
      <ClickableList
        label="Choose one"
        options={options}
        onClick={action('onClick')}
        disabled
      />
    </Decorator>
  ));
