import Tabs, { TabsProps } from '@mui/material/Tabs';
import { Meta, Story } from '@storybook/react';
import { ComponentProps, useState } from 'react';
import Tab from './tab';

type TabProps = ComponentProps<typeof Tab>;

export default {
  title: 'Buttons/Buttons',
  argTypes: {
    tabs: {
      type: 'number',
      defaultValue: 3,
      control: {
        type: 'range',
        min: 1,
        max: 30,
        step: 1
      }
    },
    tabsVariant: {
      options: ['standard', 'scrollable', 'fullWidth'],
      control: { type: 'select' }
    },
    disabled: { type: 'boolean' }
  },
  component: Tab
} as Meta;

const Template: Story<
  TabProps & {
    tabs: number;
    tabsVariant: TabsProps['variant'];
  }
> = ({ tabsVariant, variant, disabled, tabs, ...rest }) => {
  const [value, setValue] = useState(0);

  const handleChange = (event: React.SyntheticEvent, newValue: number) => {
    setValue(newValue);
  };

  const tabIndicatorProps = {
    style:
      variant === 'secondary'
        ? {
            display: 'none'
          }
        : {}
  };

  const tabsArr = Array.from({ length: tabs }, (_, i) => (
    <Tab disabled={disabled} value={i} label={`Item ${i}`} variant={variant} {...rest} />
  ));

  return (
    <Tabs
      variant={tabsVariant}
      TabIndicatorProps={tabIndicatorProps}
      value={value}
      onChange={handleChange}
    >
      {tabsArr}
    </Tabs>
  );
};

export const NavigationTabs = Template.bind({});