import React from "react";
import { Decorator, Meta, StoryFn } from "@storybook/react";
import { Switch, ThemeProviderWithStyledEngine } from "..";

const disabled = {
  table: {
    disable: true,
  },
};

const decorator: Decorator<unknown> = (Story) => (
  <ThemeProviderWithStyledEngine>{Story()}</ThemeProviderWithStyledEngine>
);

const meta = {
  title: "Components/Inputs/Switch",
  component: Switch,
  decorators: [decorator],
  argTypes: {
    size: {
      control: {
        type: "select",
      },
      options: ["small", "medium"],
    },
    checked: disabled,
    onChange: disabled,
    onCheckedChange: disabled,
  },
} satisfies Meta<typeof Switch>;

export default meta;

const Template: StoryFn<typeof Switch> = (args) => {
  return <Switch id="default" {...args} />;
};

export const Default: StoryFn<typeof Switch> = Template.bind({});

Default.args = {
  disabled: false,
  size: "medium",
  label: "Switch Label",
};
