import { Story, Meta } from "@storybook/react";
import { SwitchProps } from "antd";
import React from "react";
import { useState } from "react";
import { StoryLayout } from "../../../../.storybook/StoryComponents";
import { Toggle } from "../Toggle";
import { ToggleProps } from "../types";
import { ToggleDocs } from "./ToggleDocs";

export default {
  title: "Atoms/Toggle",
  parameters: {
    docs: {
      page: ToggleDocs,
    },
  },
  component: Toggle,
} as Meta;

export const Default: Story<ToggleProps> = args => {
  const [toggle, setToggle] = useState<boolean>(true);

  return (
    <StoryLayout>
      <Toggle onChange={() => setToggle(!toggle)} {...args} />
    </StoryLayout>
  );
};

Default.args = {
  label: "label",
};

Default.argTypes = {
  disabled: {
    options: [true, false],
    control: { type: "radio" },
  },
  label: {
    defaultValue: "label",
    control: {
      type: "text",
    },
  },
};