// @flow
import React, { useState, useCallback } from 'react';
import styled from 'styled-components';
import { action } from '@storybook/addon-actions';
import type { StoryDecorator } from '@storybook/react';
import { FormattedMessage } from 'react-intl';
import type { TranslatedContent } from '../../types';
import { AnimatedFilterBar } from './index';
import docs from './animated-filter-bar.mdx';
import { Box } from '../../primitives';
import type { FontSize } from '../../mixins/typography';
import type { SpaceProps } from '../../mixins/spacing';

const withBackground: StoryDecorator = (Story) => (
  <Box colorName="background">
    <Story />
  </Box>
);

export default {
  title: 'One-off/AnimatedFilterBar',
  component: AnimatedFilterBar,
  decorators: [withBackground],
  parameters: {
    docs: {
      page: docs,
    },
  },
};

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>
  );
};

export const Normal = () => <Demo />;

export const DefaultSelectedValue = () => <Demo defaultValue="m6" />;

export const CustomStyling = () => (
  <Demo defaultValue="m6" fontSize="f0" spacing="p0" />
);

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