import React from 'react';
import { Meta, StoryFn } from "@storybook/react-webpack5";
import { useArgs, useCallback, useState } from "storybook/preview-api";
import Tabs from '@molecules/Tabs/Tabs';
import { TabProps } from '@molecules/Tabs/Tabs';

export default {
  title: 'molecules/Tabs',
  component: Tabs,
  argTypes: {},
} as Meta<typeof Tabs>;

const tabs = [
  {
    eventKey: 'tab1',
    title: 'Tab 1',
    component: <div>tab 1</div>
  },
  {
    eventKey: 'tab2',
    title: 'Tab 2',
    component: <div>tab 2</div>
  },
  {
    eventKey: 'tab3',
    title: 'Tab 3',
    component: <div>tab 3</div>,
    disabled: true,
  }
]

const Template: StoryFn<TabProps> = ({activeKey, onSelect, ...args}) => {
  const [_, updateArgs] = useArgs();
  const [internalValue, setInternalValue] =
    useState<string | number | undefined>(activeKey);

  const handleChange = useCallback((newValue: string | null) => {
    setInternalValue(newValue ?? undefined);
    updateArgs({activeKey: newValue});
  }, []);

  return <Tabs activeKey={internalValue} onSelect={handleChange} {...args} />;
};

export const _Tabs = Template.bind({});
_Tabs.args = {
  tabs,
  activeKey: 'tab1',
  vertical: false,
};