// @flow
import React, { useState, useCallback } from 'react';
import styled from 'styled-components';
import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import { withInfo } from '@storybook/addon-info';
import { FormattedMessage } from 'react-intl';
import type { TranslatedContent } from '../../types';
import { AnimatedFilterBar } from './index';
import { configDocs } from '../../../.storybook/config-docs';
import docs from './ANIMATED_FILTER_BAR.mkd';
import { Box } from '../../primitives';
import { type FontSize } from '../../mixins/typography';
import { type SpaceProps } from '../../mixins/spacing';

const defaultOptions = [
  { value: 'd5', label: '5D' },
  { value: 'm1', label: '1M' },
  { value: 'm6', label: '6M' },
  { value: 'ytd', label: 'YTD' },
  { value: 'y1', label: '1Y' },
  { value: 'max', label: 'Max' },
  { value: 'long', label: 'LongLabel' },
];

const Container = styled(Box)`
  max-width: 600px;
`;

const Demo = ({
  options = defaultOptions,
  defaultValue,
  fontSize,
  spacing,
}: SpaceProps & {
  options?: Array<{
    value: string,
    label: TranslatedContent,
  }>,
  defaultValue?: ?string,
  fontSize?: FontSize,
}) => {
  const [value, setValue] = useState(defaultValue);
  const handleChange = useCallback(
    v => {
      setValue(v);
      action('onChange')(v);
    },
    [setValue],
  );

  return (
    <Container>
      <AnimatedFilterBar
        options={options}
        value={value}
        onChange={handleChange}
        fontSize={fontSize}
        spacing={spacing}
      />
    </Container>
  );
};

storiesOf('One-off/AnimatedFilterBar', module)
  .addDecorator(withInfo(configDocs(docs, AnimatedFilterBar)))
  .addDecorator(story => <Box colorName="background">{story()}</Box>)
  .add('normal', () => <Demo />)
  .add('with default selected value', () => <Demo defaultValue="m6" />)
  .add('with custom styling', () => (
    <Demo defaultValue="m6" fontSize="f0" spacing="p0" />
  ))
  .add('with localized labels', () => (
    <Demo
      options={[
        {
          value: 'localized',
          label: <FormattedMessage id="test" />,
        },
      ]}
    />
  ));
