// @flow
import React from 'react';
import styled from 'styled-components';
import { action } from '@storybook/addon-actions';
import { storiesOf } from '@storybook/react';
import { TabSet } from './index';
import { withDocs } from '../../../../.storybook/with-docs';
import { getPaletteColor } from '../../../mixins/branding';
import docs from './TAB_SET.mkd';

const Content = styled.div`
  width: 381px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  background-color: ${props =>
    props.history
      ? getPaletteColor('brand-primary-base')({ theme: props.theme })
      : getPaletteColor('brand-secondary-base')({ theme: props.theme })};
  margin-top: 10px;
  border-radius: 10px;
`;

storiesOf('Core/Behaviors/TabSet', module).add(
  'normal',
  withDocs(docs)(() => (
    <TabSet
      selectedTabIndex={0}
      onSelect={action('Selected')}
      tabs={[
        {
          id: 'plan',
          label: 'Plan',
          content: <Content>Plan Content</Content>,
        },
        {
          id: 'history',
          label: 'History',
          content: <Content history>History Content</Content>,
        },
      ]}
    />
  )),
);
