import * as React from 'react';
import { select } from '@storybook/addon-knobs';
import { Tabs, TabList, Tab, TabPanels, TabPanel } from '.';
import { Stack, Shelf } from '../Layout';
import Icon from '../Icon';
import { Text } from '../Text';
import Stock from '../Stock';

export default {
  title: 'Components|Tabs',
  component: Tabs,
};

export const Default = () => {
  const size = select('size', ['large', 'small'], 'small');
  const appearance = select('appearance', ['primary', 'secondary'], 'primary');
  const orientation = select('orientation', ['horizontal', 'vertical'], 'horizontal');
  return (
    <Stack gap="xlarge">
      <Tabs as={orientation === 'horizontal' ? Stack : Shelf}>
        <TabList appearance={appearance} size={size} orientation={orientation}>
          <Tab size="small">Subscriptions</Tab>
          <Tab>Notifications</Tab>
          <Tab>Security</Tab>
        </TabList>
        <TabPanels>
          <TabPanel>Yes, alright.</TabPanel>
          <TabPanel>Okay then.</TabPanel>
          <TabPanel>Sure, ok.</TabPanel>
        </TabPanels>
      </Tabs>
      <Tabs as={orientation === 'horizontal' ? Stack : Shelf}>
        <TabList
          accentColor="Blue"
          appearance={appearance}
          size={size}
          orientation={orientation}
          spacing="centered"
        >
          <Tab>UK account</Tab>
          <Tab>USD account</Tab>
          <Tab>GBP account</Tab>
        </TabList>
        <TabPanels>
          <TabPanel>Yes, alright.</TabPanel>
          <TabPanel>Okay then.</TabPanel>
          <TabPanel>Sure, ok.</TabPanel>
        </TabPanels>
      </Tabs>
    </Stack>
  );
};

export const WithLabel = () => {
  const size = select('size', ['large', 'small'], 'small');
  const appearance = select('appearance', ['primary', 'secondary'], 'primary');
  const orientation = select('orientation', ['horizontal', 'vertical'], 'horizontal');

  return (
    <Tabs as={orientation === 'horizontal' ? Stack : Shelf}>
      <TabList appearance={appearance} size={size} orientation={orientation}>
        <Tab label={<Icon name="info" color="Mid Neutral 2" />}>Subscriptions</Tab>
        <Tab
          label={
            <Text fontSize="xxsmall" color="inherit">
              (Some label)
            </Text>
          }
        >
          Notifications
        </Tab>
        <Tab label={<Stock amount="100" currencyCode="GBP" />}>Security</Tab>
      </TabList>
      <TabPanels>
        <TabPanel>Yes, alright.</TabPanel>
        <TabPanel>Okay then.</TabPanel>
        <TabPanel>Sure, ok.</TabPanel>
      </TabPanels>
    </Tabs>
  );
};