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

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

import {
  TemsHeader,
  type TemsHeaderProps,
} from "@components/header/tems-header";

import "@components/buttons/tems-button";
import "@components/header/breadcrumbs/tems-breadcrumb";
import "@components/header/breadcrumbs/ui/tems-breadcrumb-item";
import "@components/forms/ui/tems-label";
import "@components/header/breadcrumbs/ui/tems-breadcrumb-divider";
import "@components/shared/ui/tems-division";

const meta: Meta<TemsHeaderProps & { cta: boolean } & { submenu: boolean }> = {
  title: "components/header/tems-header",
  tags: ["autodocs", "!dev", "Molecules"],
  render: (args) => {
    new TemsHeader();

    return html`<tems-header
      heading=${args.heading || nothing}
      .breadcrumb=${args.breadcrumb || nothing}
      back-button=${args.backButton || nothing}
    >${
      args.cta
        ? html`<tems-button slot="cta" label="action" type="outline-color"></tems-button>`
        : nothing
    }
      ${
        args.submenu
          ? html`<tems-label slot="submenu" label="label"></tems-label>`
          : nothing
      }
      </tems-header>`;
  },
  args: {
    heading: undefined,
    breadcrumb: [],
    cta: false,
    submenu: false,
    backButton: false,
  },
  argTypes: {
    heading: { control: "text" },
    breadcrumb: {
      description: "Path object",
      control: { type: "object" },
      table: {
        defaultValue: { summary: "[]" },
      },
    },
    cta: {
      control: "boolean",
      description: "Sample slotted content",
    },
    submenu: {
      control: "boolean",
      description: "Sample slotted submenu content",
    },
    backButton: {
      control: "boolean",
      description: "Display back button",
    },
  },
};

export default meta;

export type TemsHeaderStory = StoryObj<TemsHeaderProps & { cta: boolean }>;

const defaultBreadcumb = [
  {
    route: "/home",
    label: "Home",
    resource: "",
  },
  {
    route: "/resource",
    label: "Resource",
    resource: "Category",
  },
  {
    route: "/ressource/123",
    label: "Resource 123",
    resource: "123",
  },
];

export const Default: TemsHeaderStory = {
  args: {
    heading: "Ima teesting",
    breadcrumb: defaultBreadcumb,
    cta: true,
    backButton: true,
  },
};

export const NoBreadcrumb: TemsHeaderStory = {
  args: {
    heading: "No breadcumb here",
    cta: true,
  },
};

export const NoCTA: TemsHeaderStory = {
  args: {
    heading: "No CTA here",
    breadcrumb: defaultBreadcumb,
  },
};