// @flow

import React from 'react';
import styled from 'styled-components';
import { action } from '@storybook/addon-actions';
import { TabSet } from './index';
import type { TabSetProps } from './tab-set.proptypes';
import docs from './tab-set.mdx';
import { getPaletteColor } from '../../../mixins/branding';

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;
`;

export default {
  component: TabSet,
  title: 'Tab Set',
  parameters: {
    fileName: __filename,
    docs: {
      page: docs,
    },
  },
};

const DEFAULT_PROPS: TabSetProps = {
  selectedTabIndex: 0,
  onSelect: action('Selected'),
  tabs: [],
};

export const Default = () => (
  <TabSet
    {...DEFAULT_PROPS}
    tabs={[
      {
        id: 'plan',
        label: 'Plan',
        content: <Content>Plan Content</Content>,
      },
      {
        id: 'history',
        label: 'History',
        content: <Content history>History Content</Content>,
      },
    ]}
  />
);
