import React, { useState } from "react";
import { ComponentStory } from "@storybook/react";
import { StoryLayout } from "../../../.storybook/StoryComponents";
import { Tabs } from "./Tabs";
import { TabsDocs } from "./TabsDocs";
import { action } from "@storybook/addon-actions";
import styled from "styled-components";

export default {
  title: "Molecules/Tabs",
  component: Tabs,
  args: {
    disabled: false,
    vertical: false,
  },
  parameters: {
    docs: {
      page: TabsDocs,
    },
  },
};

export const Basic: ComponentStory<typeof Tabs> = () => {
  const [activeKey, setActiveKey] = useState("1");
  const onChange = (value: string) => setActiveKey(value);
  const tabClickAction = action("Tab was clicked");
  const onTabClick = (value: string) => tabClickAction(value);

  return (
    <StoryLayout>
      <Tabs activeKey={activeKey} onChange={onChange} onTabClick={onTabClick}>
        <Tabs.TabPane tab="Tab 1" key="1">
          Content of Tab Pane 1
        </Tabs.TabPane>
        <Tabs.TabPane tab="Tab 2" key="2">
          Content of Tab Pane 2
        </Tabs.TabPane>
        <Tabs.TabPane tab="Tab 3" key="3">
          Content of Tab Pane 3
        </Tabs.TabPane>
      </Tabs>
    </StoryLayout>
  );
};

export const WithBadge: ComponentStory<typeof Tabs> = () => {
  const [activeKey, setActiveKey] = useState("1");
  const onChange = (value: string) => setActiveKey(value);
  const tabClickAction = action("Tab was clicked");
  const onTabClick = (value: string) => tabClickAction(value);

  return (
    <StoryLayout>
      <Tabs activeKey={activeKey} onChange={onChange} onTabClick={onTabClick}>
        <Tabs.TabPane
          tab={<Tabs.WithBadge title={"Tab 1"} content={"+3"} />}
          key="1"
        >
          Content of Tab Pane 1
        </Tabs.TabPane>
        <Tabs.TabPane tab="Tab 2" key="2">
          Content of Tab Pane 2
        </Tabs.TabPane>
        <Tabs.TabPane tab="Tab 3" key="3">
          Content of Tab Pane 3
        </Tabs.TabPane>
      </Tabs>
    </StoryLayout>
  );
};

Basic.parameters = {
  docs: {
    storyDescription: "Базовый пример использования компонента",
  },
};