import React, { useState } from 'react';

import { ComponentStory, ComponentMeta } from '@storybook/react';
import { Chip } from '@mui/material';

import { Icon, ICON_SIZE } from 'components/Icon/Icon';

import { ITabData } from './types';
import { Tabs } from './Tabs';
import { THEME } from '../../constants';

export default {
  title: 'ReactComponentLibrary/Tabs',
  component: Tabs,
  decorators: [(Story): JSX.Element => <Story />],
} as ComponentMeta<typeof Tabs>;

const Template: ComponentStory<typeof Tabs> = (args) => {
  const [value, setValue] = useState(args.value);

  return (
    <Tabs
      {...args}
      value={value}
      onChange={setValue}
    />
  );
};

const defaultTabsData: Array<ITabData<string>> = [
  {
    label: 'Active tab',
    value: '1',
  },
  {
    label: 'Default tab',
    value: '2',
  },
  {
    label: 'Disabled tab',
    value: '3',
    disabled: true,
  },
];

export const LightDefaultTabs = Template.bind({});
LightDefaultTabs.args = {
  value: '1',
  tabsData: defaultTabsData,
};

const iconsTabsData: Array<ITabData<string>> = [
  {
    label: 'Active tab',
    value: '1',
    leftElement: (
      <Icon
        name="tiktok"
        size={ICON_SIZE.medium}
      />
    ),
  },
  {
    label: 'Default tab',
    value: '2',
    leftElement: (
      <Icon
        name="tiktok"
        size={ICON_SIZE.medium}
      />
    ),
  },
  {
    label: 'Disabled tab',
    value: '3',
    disabled: true,
    leftElement: (
      <Icon
        name="tiktok"
        size={ICON_SIZE.medium}
      />
    ),
  },
];

export const LightTabsWithIcons = Template.bind({});
LightTabsWithIcons.args = {
  value: '1',
  tabsData: iconsTabsData,
};

const chipTabsData: Array<ITabData<string>> = [
  {
    label: 'Active tab',
    value: '1',
    leftElement: (
      <Icon
        name="tiktok"
        size={ICON_SIZE.medium}
      />
    ),
  },
  {
    label: 'Default tab',
    value: '2',
    leftElement: (
      <Icon
        name="tiktok"
        size={ICON_SIZE.medium}
      />
    ),
    rightElement: <Chip label="new" />,
  },
  {
    label: 'Disabled tab',
    value: '3',
    disabled: true,
    leftElement: (
      <Icon
        name="tiktok"
        size={ICON_SIZE.medium}
      />
    ),
    rightElement: <Chip label="old" />,
  },
];

export const LightTabsWithChips = Template.bind({});
LightTabsWithChips.args = {
  value: '1',
  tabsData: chipTabsData,
};

const tooltipTabsData: Array<ITabData<string>> = [
  {
    label: 'Active tab',
    value: '1',
    leftElement: (
      <Icon
        name="tiktok"
        size={ICON_SIZE.medium}
      />
    ),
    tooltip: { title: 'Active tab' },
  },
  {
    label: 'Default tab',
    value: '2',
    leftElement: (
      <Icon
        name="tiktok"
        size={ICON_SIZE.medium}
      />
    ),
    tooltip: { title: 'Default tab' },
  },
  {
    label: 'Disabled tab',
    value: '3',
    disabled: true,
    leftElement: (
      <Icon
        name="tiktok"
        size={ICON_SIZE.medium}
      />
    ),
  },
];

export const LightTabsWithTooltip = Template.bind({});
LightTabsWithTooltip.args = {
  value: '1',
  tabsData: tooltipTabsData,
};

export const DarkDefaultTabs = Template.bind({});
DarkDefaultTabs.args = {
  value: '1',
  tabsData: defaultTabsData,
  theme: THEME.dark,
};
DarkDefaultTabs.parameters = {
  backgrounds: { default: 'dark' },
};

export const DarkTabsWithIcons = Template.bind({});
DarkTabsWithIcons.args = {
  value: '1',
  tabsData: iconsTabsData,
  theme: THEME.dark,
};
DarkTabsWithIcons.parameters = {
  backgrounds: { default: 'dark' },
};

export const DarkTabsWithChips = Template.bind({});
DarkTabsWithChips.args = {
  value: '1',
  tabsData: chipTabsData,
  theme: THEME.dark,
};
DarkTabsWithChips.parameters = {
  backgrounds: { default: 'dark' },
};

export const DarkTabsWithTooltip = Template.bind({});
DarkTabsWithTooltip.args = {
  value: '1',
  tabsData: tooltipTabsData,
  theme: THEME.dark,
};
DarkTabsWithTooltip.parameters = {
  backgrounds: { default: 'dark' },
};