import * as React from "react"
import type { ComponentStory, ComponentMeta } from "@storybook/react"
import { Tabs } from "../src"
import { useState } from "react"
import { FullScreenIcon } from "../src/public/icons/FullScreen"

const TabPane = Tabs.TabPane

export default {
  title: "lib/Tabs",
  component: Tabs,
  subcomponents: { TabPane }
} as ComponentMeta<typeof Tabs>

const Template: ComponentStory<typeof Tabs> = args => {
  const [currentKey, setCurrentKey] = useState<number>()
  return (
    <>
      <Tabs defaultActiveKey={2} activeKey={currentKey} onChange={setCurrentKey}>
        <TabPane
          key={1}
          tab={
            <div className="flex items-center">
              <span>tab A</span>
              <img src={require("../src/static/more.svg")} alt="" className="w-4 h-4" />
              <FullScreenIcon color="blue"></FullScreenIcon>
            </div>
          }
        >
          A
        </TabPane>
        <TabPane key={2} tab={`tab B`}>
          B
        </TabPane>
        <TabPane key={3} tab={`tab C`}>
          C
        </TabPane>
      </Tabs>
    </>
  )
}

const VerticalTemplate: ComponentStory<typeof Tabs> = args => {
  const [currentKey, setCurrentKey] = useState<number>()
  return (
    <>
      <Tabs
        orientation="vertical"
        defaultActiveKey={2}
        activeKey={currentKey}
        onChange={setCurrentKey}
        classes={{ root: "w-[200px]" }}
      >
        <TabPane key={2} tab={`tab B`}>
          B
        </TabPane>
        <TabPane key={3} tab={`tab C`}>
          C
        </TabPane>
      </Tabs>
    </>
  )
}
export const Normal = Template.bind({})
export const VerticalNormal = VerticalTemplate.bind({})