import { Canvas, Meta, Story } from '@storybook/addon-docs/blocks'

import { BASIC } from '../_utils/taxonomy'
import { Button } from '../button'
import { BusIcon } from '../icon/busIcon'
import { CarpoolIcon } from '../icon/carpoolIcon'
import { BaseSection as Section } from '../layout/section/baseSection'
import { Tabs, TabStatus } from './index'

<Meta title={`${BASIC}/Tabs`} />

export const panels = [
  <div>Content for first tab</div>,
  <div>
    <Button
      onClick={() => {
        // eslint-disable-next-line no-console
        console.log('hello')
      }}
    >
      Button inside panel 2.
    </Button>
  </div>,
  <div>Content for tab3</div>,
]

# Tabs

export const defaultTabsConfig = {
  activeTabId: 'tab1',
  status: TabStatus.FIXED,
  tabs: [
    {
      id: 'tab1',
      label: 'Tab 1',
      panelContent: panels[0],
      badgeContent: '',
    },
    {
      id: 'tab2',
      label: 'Very Very Long Tab 2',
      panelContent: panels[1],
      badgeContent: '2',
      badgeAriaLabel: 'Unread Message',
    },
    {
      id: 'tab3',
      label: 'Tab 3',
      panelContent: panels[2],
      badgeContent: '',
    },
  ],
}

<Canvas>
  <Story name="Default">
    <Section>
      <Tabs
        tabs={defaultTabsConfig.tabs}
        activeTabId={defaultTabsConfig.activeTabId}
        status={defaultTabsConfig.status}
      />
    </Section>
  </Story>
</Canvas>

# Tabs 1

export const iconTabsConfig = {
  activeTabId: 'tab1',
  status: TabStatus.FIXED,
  tabs: [
    {
      id: 'tab1',
      label: 'Text only',
      panelContent: panels[0],
      badgeContent: '',
    },
    {
      id: 'tab2',
      label: 'Multiple words with an icon',
      icon: <CarpoolIcon size="32" />,
      showIconOnly: false,
      panelContent: panels[1],
      badgeContent: '2',
      badgeAriaLabel: 'Unread Message',
    },
    {
      id: 'tab3',
      label: 'Tremendouslylongwording',
      icon: <BusIcon size="32" />,
      showIconOnly: false,
      panelContent: panels[2],
      badgeContent: '',
    },
    {
      id: 'tab4',
      label: 'Icon only',
      icon: <BusIcon size="32" />,
      showIconOnly: true,
      panelContent: panels[2],
      badgeContent: '',
    },
  ],
}

<Canvas>
  <Story name="With Icons">
    <Section>
      <Tabs
        tabs={iconTabsConfig.tabs}
        activeTabId={iconTabsConfig.activeTabId}
        status={iconTabsConfig.status}
      />
    </Section>
  </Story>
</Canvas>

export const tabsWithSecondLine = [
  {
    id: 'tab1',
    label: 'Text only',
    panelContent: panels[0],
    badgeContent: '',
    secondLine: '11',
  },
  {
    id: 'tab2',
    label: 'Multiple words with an icon',
    icon: <CarpoolIcon size="32" />,
    showIconOnly: false,
    panelContent: panels[1],
    badgeContent: '2',
    badgeAriaLabel: 'Unread Message',
    secondLine: '6',
  },
  {
    id: 'tab3',
    label: 'Tremendouslylongwording',
    icon: <BusIcon size="32" />,
    showIconOnly: false,
    panelContent: panels[2],
    badgeContent: '',
    secondLine: '-',
  },
  {
    id: 'tab4',
    label: 'Icon only',
    icon: <BusIcon size="32" />,
    showIconOnly: true,
    panelContent: panels[2],
    badgeContent: '',
    secondLine: '100 000 000 000 000 000',
  },
]

<Canvas>
  <Story name="With second line">
    <Section>
      <Tabs
        tabs={tabsWithSecondLine}
        activeTabId={defaultTabsConfig.activeTabId}
        status={defaultTabsConfig.status}
      />
    </Section>
  </Story>
</Canvas>