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

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

import {
  TemsBreadcrumb,
  type TemsBreadcrumbProps,
} from "@components/header/breadcrumbs/tems-breadcrumb";

import "~icons/heroicons-outline/home";

import "@components/header/breadcrumbs/ui/tems-breadcrumb-item";
import "@components/header/breadcrumbs/ui/tems-breadcrumb-divider";

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

const meta: Meta<TemsBreadcrumbProps> = {
  title: "components/header/breadcrumbs/tems-breadcrumb",
  tags: ["autodocs", "!dev", "Molecules"],
  render: (args) => {
    new TemsBreadcrumb();

    return html`<tems-breadcrumb
      .path=${args.path || nothing}
    ></tems-breadcrumb>`;
  },
  args: {
    path: [],
  },
  argTypes: {
    path: {
      description: "Path object",
      control: { type: "object" },
      table: {
        defaultValue: { summary: "[]" },
      },
    },
  },
};

export default meta;

export type TemsBreadcrumbStory = StoryObj<TemsBreadcrumbProps>;

export const FirstLayer: TemsBreadcrumbStory = {
  args: {
    path: [
      {
        route: "/home",
        label: "Home",
        resource: "",
      },
    ],
  },
};

export const MultiLayers: TemsBreadcrumbStory = {
  args: {
    path: [
      {
        route: "/home",
        label: "Home",
        resource: "",
      },
      {
        route: "/resource",
        label: "Resource",
        resource: "Category",
      },
      {
        route: "/ressource/123",
        label: "Resource 123",
        resource: "123",
      },
    ],
  },
};

export const WithUnclickableElements: TemsBreadcrumbStory = {
  args: {
    path: [
      {
        route: "/home",
        label: "Home",
        resource: "",
      },
      {
        route: "/resource",
        label: "Resource",
        resource: "Category",
      },
      {
        route: "",
        label: "Resource 2",
        resource: "Category 2",
      },
      {
        route: "",
        label: "Resource 3",
        resource: "Category 3",
      },
      {
        route: "/ressource/123",
        label: "Resource 123",
        resource: "123",
      },
    ],
  },
};

export const WithIconElement: TemsBreadcrumbStory = {
  args: {
    path: [
      {
        route: "/home",
        label: "Home",
        resource: "",
        icon: DEFAULT_ICON,
      },
      {
        route: "/resource",
        label: "Resource",
        resource: "Category",
      },
      {
        route: "/ressource/123",
        label: "Resource 123",
        resource: "123",
      },
    ],
  },
};

export const WithIconElements: TemsBreadcrumbStory = {
  args: {
    path: [
      {
        route: "/home",
        label: "Home",
        resource: "",
        icon: DEFAULT_ICON,
      },
      {
        route: "/resource",
        label: "Resource",
        resource: "Category",
        icon: DEFAULT_ICON,
      },
      {
        route: "/ressource/123",
        label: "Resource 123",
        resource: "123",
        icon: DEFAULT_ICON,
      },
    ],
  },
};