// @flow
import React 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 { RadioOptions } from './index';
import { configDocs } from '../../../.storybook/config-docs';
import { Grid, GridItem } from '../../core';
import docs from './RADIO_OPTIONS.mkd';

storiesOf('Graveyard ☠️/RadioOptions', module)
  .addDecorator(withInfo(configDocs(docs, RadioOptions)))
  .add('normal', () => (
    <Grid>
      <GridItem sm={4} md={4} lg={4}>
        <RadioOptions
          label="Choose an ice cream flavour"
          selectedId="vanilla" /* TODO: not this */
          onClick={action('onChange: changing ice cream flavour')}
          options={[
            { id: 'vanilla', text: 'Vanilla' },
            { id: 'chocolate', text: 'Chocolate' },
            {
              id: 'localized',
              text: 'Description is localized',
              description: <FormattedMessage id="test" />,
            },
            {
              id: 'both',
              text: 'Both',
              description: 'You enjoy both equally',
            },
            {
              id: 'other',
              text: 'Other',
              description: 'Another option entirely',
              freeForm: {
                type: 'text',
                placeholder: 'Favourite ice cream',
                value: '',
                onChange: action('onChange'),
              },
            },
          ]}
        />
      </GridItem>
    </Grid>
  ));
