/components/list/variations

import { badge } from "@hedia/hexui/components/badge";
import { button } from "@hedia/hexui/components/button";
import { list, listItem } from "@hedia/hexui/components/list";
import { toggle } from "@hedia/hexui/components/toggle";
import { button as htmlButton, form, input, span } from "@hedia/html/elements";
import { checkmarkOutlineIcon, chevRightOutlineIcon, deleteOutlineIcon, mailOutlineIcon } from "@hedia/iconly/outline";

export default {
  AlternativeLeadingAndTrailing,
  ListWithFormSubmitButtons,
  LongListItemTitles,
};

export function AlternativeLeadingAndTrailing() {
  return list(
    listItem({
      leading: [badge({ color: "green", size: "lg" }, "Approved")],
      title: "Badge",
      subtitle: "and chevron",
      trailing: [chevRightOutlineIcon()],
      href: "#",
    }),
    listItem({
      leading: [badge({ color: "red", size: "lg" }, "Rejected")],
      title: "Badge",
      subtitle: "and button",
      trailing: [button({ kind: "secondary-danger", shape: "round" }, deleteOutlineIcon())],
    }),
    listItem({
      leading: [badge({ color: "base", size: "lg" }, "Pending")],
      title: "Badge",
      subtitle: "and toggle",
      trailing: [
        form(
          { method: "POST", action: "#" },
          input({ type: "hidden", name: "method", value: "update" }),
          toggle({ active: true }),
        ),
      ],
    }),
    listItem({
      leading: [badge({ color: "base", size: "lg" }, "Pending")],
      title: "Badge",
      subtitle: "and toggle",
      trailing: [
        form(
          { method: "POST", action: "#" },
          input({ type: "hidden", name: "method", value: "update" }),
          toggle({ active: false }),
        ),
      ],
    }),
  );
}

export function ListWithFormSubmitButtons() {
  return list(
    form(
      { method: "POST", action: "#" },
      htmlButton(
        listItem({
          title: "Approved Item",
          trailing: [span({ class: "text-green" }, checkmarkOutlineIcon()), chevRightOutlineIcon()],
        }),
      ),
    ),
    form(
      { method: "POST", action: "#" },
      htmlButton(
        listItem({
          title: "Pending Item",
          trailing: [chevRightOutlineIcon()],
        }),
      ),
    ),
    form(
      { method: "POST", action: "#" },
      htmlButton(
        listItem({
          title: "Another Item",
          trailing: [chevRightOutlineIcon()],
        }),
      ),
    ),
  );
}

export function LongListItemTitles() {
  return list(
    listItem({
      title: "This is a very long title that should wrap onto multiple lines to demonstrate how the list item handles long text content.",
      subtitle: "This is a subtitle that also might be quite long and needs to be displayed properly.",
      trailing: [chevRightOutlineIcon()],
    }),
    listItem({
      title: "Another long title that exceeds the typical length and should be tested for proper wrapping and layout within the list item component.",
      subtitle: "A secondary line of text that provides additional context or information about the list item.",
      trailing: [chevRightOutlineIcon()],
    }),
    listItem({
      leading: [mailOutlineIcon()],
      title: "Email address",
      subtitle: "long_email_address@example.com",
      trailing: [chevRightOutlineIcon()],
    }),
    listItem({
      leading: [mailOutlineIcon()],
      title: "long_email_address@example.com",
      trailing: [chevRightOutlineIcon()],
    }),
  );
}