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

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

import {
  TemsDatepickerItem,
  type TemsDatepickerItemProps,
} from "@components/forms/ui/tems-datepicker-item";

const meta: Meta<TemsDatepickerItemProps> = {
  title: "components/forms/ui/tems-datepicker-item",
  tags: ["autodocs", "!dev", "Atoms"],
  render: (args) => {
    new TemsDatepickerItem();

    return html`<tems-datepicker-item
      label=${args.label}
      selected=${args.selected || nothing}
      active=${args.active || nothing}
      disabled=${args.disabled || nothing}
    ></tems-datepicker-item>`;
  },
  args: {
    label: "99",
    active: false,
    selected: false,
    disabled: false,
  },
  argTypes: {
    label: { control: "text" },
    active: { control: "boolean" },
    selected: { control: "boolean" },
    disabled: { control: "boolean" },
  },
};

export default meta;

export type TemsDatepickerItemStory = StoryObj<TemsDatepickerItemProps>;

export const DefaultUnselected: TemsDatepickerItemStory = {
  args: {
    label: "99",
  },
};

export const DefaultSelected: TemsDatepickerItemStory = {
  args: {
    label: "99",
    selected: true,
  },
};

export const CurrentUnselected: TemsDatepickerItemStory = {
  args: {
    label: "99",
    active: true,
  },
};

export const CurrentSelected: TemsDatepickerItemStory = {
  args: {
    label: "99",
    active: true,
    selected: true,
  },
};

export const DisabledUnselected: TemsDatepickerItemStory = {
  args: {
    label: "99",
    disabled: true,
  },
};

export const DisabledSelected: TemsDatepickerItemStory = {
  args: {
    label: "99",
    disabled: true,
    selected: true,
  },
};