// @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 { ClickableList } from './index';
import { withDocs } from '../../../../.storybook/with-docs';
import { Grid, GridItem } from '../../structures';
import docs from './CLICKABLE_LIST.mkd';

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: 'translated',
    text: <FormattedMessage id="test" />,
  },
];

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