/services/id/account

import { logo, LogoContext, LogoSize, LogoStyle } from "@hedia/brand/html";
import { avatar } from "@hedia/hexui/components/avatar";
import { button, buttons } from "@hedia/hexui/components/button";
import { content } from "@hedia/hexui/components/content";
import { header } from "@hedia/hexui/components/header";
import { list, listItem } from "@hedia/hexui/components/list";
import { modal } from "@hedia/hexui/components/modal";
import { navbar } from "@hedia/hexui/components/navbar";
import { prose } from "@hedia/hexui/components/prose";
import { screen } from "@hedia/hexui/components/screen";
import { site } from "@hedia/hexui/components/site";
import { div, h2, p } from "@hedia/html/elements";
import {
  checkBadgeOutlineIcon,
  chevLeftOutlineIcon,
  chevRightOutlineIcon,
  earthOutlineIcon,
  languageOutlineIcon,
  lockOutlineIcon,
  mailOutlineIcon,
  userOutlineIcon,
} from "@hedia/iconly/outline";

export default function Account() {
  return site(
    header(
      navbar(
        div(
          { class: "light-display-none" },
          logo({ context: LogoContext.Product, size: LogoSize.Small, style: LogoStyle.Monochrome }),
        ),
        div(
          { class: "dark-display-none" },
          logo({ context: LogoContext.Brand, size: LogoSize.Small, style: LogoStyle.Monochrome }),
        ),
      ),
    ),
    screen(
      { kind: "transparent" },
      header(navbar(button({ kind: "secondary", shape: "round" }, chevLeftOutlineIcon()), h2("Hedia account"))),
      content(
        div({ class: "align-items-center" }, avatar({ size: "lg" }, "DW")),
        list(
          listItem({
            leading: [userOutlineIcon()],
            title: "Drue Wilding",
            href: "#",
            trailing: [chevRightOutlineIcon()],
          }),
          listItem({
            "data-action": "showModal",
            "data-target": "#country-modal",
            disabled: true,
            leading: [earthOutlineIcon()],
            title: "Denmark",
            trailing: [lockOutlineIcon()],
          }),
          listItem({
            href: "#",
            leading: [languageOutlineIcon()],
            title: "English",
            trailing: [chevRightOutlineIcon()],
          }),
          listItem({
            href: "#",
            leading: [mailOutlineIcon()],
            title: "drue@hedia.com",
            trailing: [chevRightOutlineIcon()],
          }),
          listItem({
            href: "#",
            leading: [lockOutlineIcon()],
            title: "********",
            trailing: [chevRightOutlineIcon()],
          }),
        ),
        list(
          listItem({
            href: "#",
            leading: [checkBadgeOutlineIcon()],
            title: "License",
            trailing: [chevRightOutlineIcon()],
          }),
        ),
        list(
          listItem({
            href: "#",
            title: "Privacy Notice",
            trailing: [chevRightOutlineIcon()],
          }),
          listItem({
            href: "#",
            title: "Terms and Conditions",
            trailing: [chevRightOutlineIcon()],
          }),
        ),
        button(
          { kind: "secondary-danger", "data-action": "showModal", "data-target": "#delete-modal" },
          "Delete account",
        ),
      ),
      modal(
        { id: "country-modal" },
        content(
          prose(
            h2("Country cannot be changed"),
            p("Contact our support if you have relocated or accidentally selected the wrong country."),
          ),
          button({ kind: "primary", type: "button", "data-action": "close" }, "Close"),
        ),
      ),
      modal(
        { id: "delete-modal" },
        content(
          prose(h2("Delete your account?"), p("To delete your Hedia account, follow the link below.")),
          buttons(
            { arrangement: "vertical" },
            button({ kind: "secondary", type: "button" }, "Open hedia.com"),
            button({ kind: "primary", type: "button", "data-action": "close" }, "Close"),
          ),
        ),
      ),
    ),
  );
}