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

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

import {
  TemsBreadcrumbItem,
  type TemsBreadcrumbItemProps,
} from "@components/header/breadcrumbs/ui/tems-breadcrumb-item";
import "~icons/heroicons-outline/selector";

const DEFAULT_ICON = html`<icon-heroicons-outline-selector></icon-heroicons-outline-selector>`;

const meta: Meta<TemsBreadcrumbItemProps> = {
  title: "components/header/breadcrumbs/ui/tems-breadcrumb-item",
  tags: ["autodocs", "!dev", "Atoms"],
  render: (args) => {
    new TemsBreadcrumbItem();

    return html`<tems-breadcrumb-item
      label=${args.label || nothing}
      .icon=${args.icon || nothing}
      active=${args.active || nothing}
      disabled=${args.disabled || nothing}
    ></tems-breadcrumb-item>`;
  },
  args: {
    label: undefined,
    icon: undefined,
    active: undefined,
    disabled: undefined,
  },
  argTypes: {
    label: { control: "text" },
    icon: {
      control: {
        type: "select",
        labels: { undefined: "undefined", "[object Object]": "Sample icon" },
      },
      table: { defaultValue: { summary: undefined } },
      options: [undefined, DEFAULT_ICON],
    },
    active: {
      control: "boolean",
      table: { defaultValue: { summary: "false" } },
    },
    disabled: {
      control: "boolean",
      table: { defaultValue: { summary: "false" } },
    },
  },
};

export default meta;

export type TemsBreadcrumbItemStory = StoryObj<TemsBreadcrumbItemProps>;

export const Default: TemsBreadcrumbItemStory = {
  args: {
    label: "Label",
    icon: undefined,
    active: false,
    disabled: false,
  },
};

export const Active: TemsBreadcrumbItemStory = {
  args: {
    label: "Label",
    icon: undefined,
    active: true,
    disabled: false,
  },
};

export const Disabled: TemsBreadcrumbItemStory = {
  args: {
    label: "Label",
    icon: undefined,
    active: false,
    disabled: true,
  },
};

export const ActiveDisabled: TemsBreadcrumbItemStory = {
  args: {
    label: "Label",
    icon: undefined,
    active: true,
    disabled: true,
  },
};

export const WithIcon: TemsBreadcrumbItemStory = {
  args: {
    label: "Label",
    icon: DEFAULT_ICON,
    active: false,
    disabled: false,
  },
};

export const WithIconActive: TemsBreadcrumbItemStory = {
  args: {
    label: "Label",
    icon: DEFAULT_ICON,
    active: true,
    disabled: false,
  },
};

export const WithIconDisabled: TemsBreadcrumbItemStory = {
  args: {
    label: "Label",
    icon: DEFAULT_ICON,
    active: false,
    disabled: true,
  },
};

export const WithIconActiveDisabled: TemsBreadcrumbItemStory = {
  args: {
    label: "Label",
    icon: DEFAULT_ICON,
    active: true,
    disabled: true,
  },
};