// Mockup https://www.figma.com/design/zsq2ahat30acTnumyy9aqC/00.Small-System?node-id=82-1655&m=dev
import { html, nothing } from "lit";

import type { Meta, StoryObj } from "@storybook/web-components";

import {
  TemsToggle,
  type TemsToggleProps,
} from "@components/forms/tems-toggle";

const meta: Meta<TemsToggleProps> = {
  title: "components/forms/tems-toggle",
  tags: ["autodocs", "!dev", "Atoms"],
  render: (args) => {
    new TemsToggle();

    return html`<tems-toggle
      size="${args.size || nothing}"
      disabled="${args.disabled || nothing}"
      checked="${args.checked || nothing}"
    ></tems-toggle>`;
  },
  args: {
    size: "sm",
    checked: false,
    disabled: false,
  },
  argTypes: {
    size: {
      control: "select",
      table: {
        defaultValue: { summary: "sm" },
      },
      options: ["sm", "md"],
    },
    checked: { control: "boolean" },
    disabled: { control: "boolean" },
  },
};

export default meta;

export type TemsToggleStory = StoryObj<TemsToggleProps>;

export const Default: TemsToggleStory = {};

export const Checked: TemsToggleStory = {
  args: {
    checked: true,
  },
};

export const Disabled: TemsToggleStory = {
  args: {
    disabled: true,
  },
};

export const CheckedDisabled: TemsToggleStory = {
  args: {
    checked: true,
    disabled: true,
  },
};

export const Medium: TemsToggleStory = {
  args: {
    size: "md",
  },
};

export const MediumChecked: TemsToggleStory = {
  args: {
    size: "md",
    checked: true,
  },
};

export const MediumDisabled: TemsToggleStory = {
  args: {
    size: "md",
    disabled: true,
  },
};

export const MediumCheckedDisabled: TemsToggleStory = {
  args: {
    size: "md",
    checked: true,
    disabled: true,
  },
};