/components/dropdown/dropdown

import { dropdown } from "@hedia/hexui/components/dropdown";
import { span } from "@hedia/html/elements";
import { closeOutlineIcon, dangerOutlineIcon, infoOutlineIcon, runOutlineIcon } from "@hedia/iconly/outline";

export default {
  Basic,
  WithMultipleActiveItems,
  WithManyItems,
  WithLongItems,
  AlignEnd,
};

export function Basic() {
  return [
    dropdown(
      { placeholder: "Select sources" },
      { type: "link", href: "#", title: "All sources" },
      { type: "divider" },
      { type: "link", href: "#api", title: "api" },
      { type: "link", href: "#web", title: "web" },
      { type: "link", href: "#worker", title: "worker" },
    ),
    dropdown(
      { placeholder: "Select sources" },
      { type: "link", href: "#", title: "All sources", active: true },
      { type: "divider" },
      { type: "link", href: "#api", title: "api" },
      { type: "link", href: "#web", title: "web" },
      { type: "link", href: "#worker", title: "worker" },
    ),
  ];
}

export function WithMultipleActiveItems() {
  return [
    dropdown(
      { placeholder: "Select levels" },
      { type: "link", href: "#", title: "All levels" },
      { type: "divider" },
      {
        type: "link",
        href: "#error",
        title: "Errors",
        icon: span({ class: "text-red" }, closeOutlineIcon()),
        active: true,
      },
      {
        type: "link",
        href: "#warn",
        title: "Warnings",
        icon: span({ class: "text-yellow" }, dangerOutlineIcon()),
        active: true,
      },
      { type: "link", href: "#info", title: "Info", icon: span({ class: "text-blue" }, infoOutlineIcon()) },
      { type: "link", href: "#debug", title: "Debug", icon: runOutlineIcon() },
    ),
    dropdown(
      { placeholder: "Select countries", maxLabels: 2 },
      { type: "link", href: "#dk", title: "Denmark", active: true },
      { type: "link", href: "#de", title: "Germany", active: true },
      { type: "link", href: "#se", title: "Sweden", active: true },
      { type: "link", href: "#no", title: "Norway" },
    ),
  ];
}

export function WithManyItems() {
  const items = Array.from({ length: 20 }, (_, i) => ({
    type: "link" as const,
    href: `#item${i + 1}`,
    title: `Item ${i + 1}`,
    active: i < 5,
  }));

  return dropdown({ placeholder: "Select items", maxLabels: 3 }, ...items);
}

export function WithLongItems() {
  return dropdown(
    { placeholder: "All sources" },
    { type: "link", href: "#", title: "All sources" },
    { type: "divider" },
    { type: "link", href: "#1", title: "api-hda-hedia-com" },
    { type: "link", href: "#2", title: "api-hda-hedia-staging-com" },
    { type: "link", href: "#3", title: "dexcom-sandbox-hedia-staging-app", active: true },
    { type: "link", href: "#4", title: "dexcom-real-time-sandbox-hedia-staging-app", active: true },
    { type: "link", href: "#4", title: "notification-hedia-com" },
    { type: "link", href: "#5", title: "oauth2-hedia-staging-com" },
  );
}

export function AlignEnd() {
  return dropdown(
    { placeholder: "Select sources", align: "end" },
    { type: "link", href: "#", title: "All sources", active: true },
    { type: "divider" },
    { type: "link", href: "#api", title: "api" },
    { type: "link", href: "#web", title: "web" },
    { type: "link", href: "#worker", title: "worker" },
  );
}