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

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

import "@components/buttons/tems-button";
import "@components/buttons/ui/tems-dropdown-item";

import {
  TemsDropdown,
  type TemsDropdownProps,
} from "@components/buttons/tems-dropdown";

import "~icons/mingcute/layout-grid-line";

const DEFAULT_ICON = html`<icon-mingcute-layout-grid-line></icon-mingcute-layout-grid-line>`;

const meta: Meta<TemsDropdownProps> = {
  title: "components/buttons/tems-dropdown",
  tags: ["autodocs", "!dev", "Molecules"],
  render: (args) => {
    new TemsDropdown();

    return html`<tems-dropdown
      label=${args.label || nothing}
      open=${args.open || nothing}
    >
      ${["Card", "List", "Map", "Table"].map(
        (label) => html`
          <tems-dropdown-item
            .icon=${DEFAULT_ICON}
            label=${label}
          ></tems-dropdown-item>
        `,
      )}
    </tems-dropdown>`;
  },
  args: {
    label: undefined,
    open: false,
  },
  argTypes: {
    label: { control: "text" },
    open: { control: "boolean" },
  },
};

export default meta;

export type TemsDropdownStory = StoryObj<TemsDropdownProps>;

export const Default: TemsDropdownStory = {
  args: {
    label: "Views",
  },
};

export const Opened: TemsDropdownStory = {
  args: {
    label: "Views",
    open: true,
  },
};