// @flow
import React from 'react';
import { action } from '@storybook/addon-actions';
import { FormattedMessage } from 'react-intl';
import { FilterBar } from './index';
import docs from './filter-bar.mdx';
import { MarginChecker } from '../../../mixins/spacing/story-support/margin-checker';
import { PaddingChecker } from '../../../mixins/spacing/story-support/padding-checker';

export default {
  component: FilterBar,
  title: 'Filter Bar',
  parameters: {
    docs: {
      page: docs,
    },
  },
};

const DEFAULT_PROPS = {
  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' },
  ],
  onChange: (value) => {
    action('Switch toggled')(value);
  },
};

export const Default = () => <FilterBar {...DEFAULT_PROPS} />;

export const LocalizedLabels = () => (
  <FilterBar
    {...DEFAULT_PROPS}
    options={[{ value: 'localized', label: <FormattedMessage id="test" /> }]}
  />
);

export const SelectedValue = () => (
  <FilterBar {...DEFAULT_PROPS} selectedValue="m6" />
);

export const MixinsSpacing = () => (
  <>
    <MarginChecker Component={FilterBar} {...DEFAULT_PROPS} />
    <PaddingChecker Component={FilterBar} {...DEFAULT_PROPS} />
  </>
);
