// @flow
import React from 'react';
import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import { withInfo } from '@storybook/addon-info';
import { FormattedMessage } from 'react-intl';
import { FilterBar } from './index';
import { configDocs } from '../../../../.storybook/config-docs';
import docs from './FILTER_BAR.mkd';
import { Box } from '../../../primitives';
import type { TranslatedContent } from '../../../types';

const Decorator = ({ children }: { children: TranslatedContent }) => (
  <Box colorName="background">{children}</Box>
);

const defaultProps = {
  options: [
    { value: 'd5', label: '5D' },
    { value: 'm1', label: '1M' },
    { value: 'm6', label: '6M' },
    { value: 'ytd', label: 'YTD' },
    { value: 'y1', label: '1Y' },
    { value: 'max', label: 'Max' },
  ],
  handleSwitchClicked: () => undefined,
  onChange: value => {
    action('Switch toggled')(value);
  },
};

storiesOf('Core/Data/FilterBar', module)
  .addDecorator(withInfo(configDocs(docs, FilterBar)))
  .add('normal', () => (
    <Decorator>
      <FilterBar {...defaultProps} />
    </Decorator>
  ))
  .add('with localized labels', () => (
    <Decorator>
      <FilterBar
        {...defaultProps}
        options={[
          { value: 'localized', label: <FormattedMessage id="test" /> },
        ]}
      />
    </Decorator>
  ))
  .add('with default selected value', () => (
    <Decorator>
      <FilterBar {...defaultProps} selectedValue="m6" />
    </Decorator>
  ));
