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

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

import {
  TemsCheckbox,
  type TemsCheckboxProps,
} from "@components/forms/tems-checkbox";

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

    return html`<tems-checkbox
      type="${args.type || nothing}"
      value="${args.value || nothing}"
      size="${args.size || nothing}"
      name="${args.name || nothing}"
      checked="${args.checked || nothing}"
      disabled="${args.disabled || nothing}"
      status="${args.status || nothing}"
      indeterminate="${args.indeterminate || nothing}"
    ></tems-checkbox>`;
  },
  args: {
    type: undefined,
    value: undefined,
    size: undefined,
    name: undefined,
    checked: undefined,
    disabled: undefined,
    status: undefined,
    indeterminate: undefined,
  },
  argTypes: {
    type: {
      control: "select",
      options: ["checkbox", "radio"],
      table: {
        defaultValue: { summary: "checkbox" },
      },
    },
    value: { control: "text" },
    size: {
      control: "select",
      table: {
        defaultValue: { summary: "sm" },
      },
      options: ["sm", "md", "xs"],
    },
    name: {
      control: "text",
      table: {
        defaultValue: { summary: "(empty string)" },
      },
    },
    checked: { control: "boolean" },
    disabled: { control: "boolean" },
    status: {
      control: "text",
      table: {
        defaultValue: { summary: "undefined" },
      },
      description: "undefined/true/false/custom message",
    },
    indeterminate: { control: "boolean" },
  },
};

export default meta;

export type TemsCheckboxStory = StoryObj<TemsCheckboxProps>;

export const Default: TemsCheckboxStory = {};

export const CheckboxDisabled: TemsCheckboxStory = { args: { disabled: true } };

export const CheckboxChecked: TemsCheckboxStory = { args: { value: "true" } };

export const CheckboxCheckedValid: TemsCheckboxStory = {
  args: { value: "false", status: "true" },
};

export const CheckboxCheckedInvalid: TemsCheckboxStory = {
  args: { value: "false", status: "false" },
};

export const CheckboxCheckedCustomValidity: TemsCheckboxStory = {
  args: { value: "false", status: "This is required" },
};

export const CheckboxCheckedIndeterminate: TemsCheckboxStory = {
  args: { value: "true", indeterminate: true },
};

export const CheckboxCheckedDisabled: TemsCheckboxStory = {
  args: { value: "true", disabled: true },
};

export const Radio: TemsCheckboxStory = { args: { type: "radio" } };

export const RadioDisabled: TemsCheckboxStory = {
  args: { type: "radio", disabled: true },
};

export const RadioChecked: TemsCheckboxStory = {
  args: { type: "radio", value: "some_value", checked: true },
};

export const RadioCheckedDisabled: TemsCheckboxStory = {
  args: { type: "radio", value: "some_value", checked: true, disabled: true },
};