// @flow
import React from 'react';
import { FormattedMessage } from 'react-intl';
import { action } from '@storybook/addon-actions';
import { RadioOptions } from './index';
import { Grid, GridItem } from '../../core';
import docs from './radio-options.mdx';

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

export const 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: {
              placeholder: 'Favourite ice cream',
              value: '',
              onChange: action('onChange'),
            },
          },
        ]}
      />
    </GridItem>
  </Grid>
);
