// @flow

import React from 'react';
import { action } from '@storybook/addon-actions';
import styled from 'styled-components';
import { TabSet } from './index';
import type { TabSetProps } from './tab-set.proptypes';
import docs from './tab-set.mdx';
import { Card } from '../../structures';
import { MarginChecker } from '../../../mixins/spacing/story-support/margin-checker';
import { Box } from '../../../primitives/box';

export default {
  component: TabSet,
  title: 'Components/Navigation/Tab Set',
  parameters: {
    docs: {
      page: docs,
    },
  },
};

const DEFAULT_PROPS: TabSetProps = {
  selectedTabIndex: 0,
  onSelect: action('Selected'),
  tabs: [
    {
      id: 'plan',
      label: 'Plan',
      content: <Card spacing={['mv2', 'p2']}>Plan Content</Card>,
    },
    {
      id: 'history',
      label: 'History',
      content: <Card spacing={['mv2', 'p2']}>History Content</Card>,
    },
  ],
};

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

const StyledBox = styled(Box)`
  width: 380px;
`;

const FixedWidthTabSet = (props) => (
  <StyledBox>
    <TabSet {...props} />
  </StyledBox>
);

export const MixinsMarginOnlySpacing = () => (
  <MarginChecker Component={FixedWidthTabSet} {...DEFAULT_PROPS}>
    Click me
  </MarginChecker>
);
