import { Story, Meta } from "@storybook/react";

import { TabsProps } from "./Tabs";
import Block from "../../atoms/Block";
import Tabs from ".";

export default {
  title: "Component/Elements/Tabs",
  component: Tabs,
  parameters: {
    component: Tabs,
    previewTabs: {
      canvas: {
        hidden: true,
      },
    },
    viewMode: "docs",
  },
} as Meta;

interface ExampleProps {
  children?: React.ReactNode;
  classes: string;
}

const Template: Story<TabsProps> = (args) => <Tabs {...args}></Tabs>;

const Example: Story<ExampleProps> = (args) => {
  const classes = args.classes;
  return classes ? (
    <Block className={args.classes}>{args.children}</Block>
  ) : (
    <>{args.children}</>
  );
};

export const Properties = Template.bind({});
Properties.args = { tabs: ["Tab 1", "Tab 2", "Tab 3", "Tab 4"] };

export const TabsPanel = Example.bind({});
TabsPanel.args = {
  children: (
    <Tabs className="flex-auto" tabs={["Tab 1", "Tab 2", "Tab 3", "Tab 4"]}>
      <Block className="flex-auto">Panel 1</Block>
      <Block className="flex-auto">Panel 2</Block>
      <Block className="flex-auto">Panel 3</Block>
      <Block className="flex-auto">Panel 4</Block>
    </Tabs>
  ),
  classes: "w-full h-[320px] flex flex-col",
};

export const Variations = Example.bind({});
Variations.args = {
  children: (
    <Block className="flex flex-col space-y-12 h-[640px]">
      <Tabs
        onChange={(e) => console.log(e)}
        tabs={["Tab 1", "Tab 2", "Tab 3", "Tab 4"]}
      >
        <Block>Panel 1</Block>
        <Block>Panel 2</Block>
        <Block>Panel 3</Block>
        <Block>Panel 4</Block>
      </Tabs>
      <Tabs variation="default" tabs={["Tab 1", "Tab 2", "Tab 3", "Tab 4"]}>
        <Block>Panel 1</Block>
        <Block>Panel 2</Block>
        <Block>Panel 3</Block>
        <Block>Panel 4</Block>
      </Tabs>
      <Tabs variation="primary" tabs={["Tab 1", "Tab 2", "Tab 3", "Tab 4"]}>
        <Block>Panel 1</Block>
        <Block>Panel 2</Block>
        <Block>Panel 3</Block>
        <Block>Panel 4</Block>
      </Tabs>
      <Tabs variation="secondary" tabs={["Tab 1", "Tab 2", "Tab 3", "Tab 4"]}>
        <Block>Panel 1</Block>
        <Block>Panel 2</Block>
        <Block>Panel 3</Block>
        <Block>Panel 4</Block>
      </Tabs>
    </Block>
  ),
  classes: "w-full",
};
