/components/modals/modals

import { button, buttons } from "@hedia/hexui/components/button";
import { checkbox } from "@hedia/hexui/components/checkbox";
import { content } from "@hedia/hexui/components/content";
import { input } from "@hedia/hexui/components/input";
import { modal } from "@hedia/hexui/components/modal";
import { prose } from "@hedia/hexui/components/prose";
import { a, br, form, h2, p, span } from "@hedia/html/elements";
import { lockOutlineIcon, mailOutlineIcon } from "@hedia/iconly/outline";

export function Interactive() {
  return [
    buttons(
      { arrangement: "vertical" },
      button(
        { kind: "primary", "data-action": "showModal", "data-target": "#simple-modal" },
        "Open simple modal",
      ),
      button({ kind: "primary", "data-action": "showModal", "data-target": "#form-modal" }, "Open form modal"),
    ),

    modal(
      { id: "simple-modal" },
      content(
        prose(h2("Simple modal"), p("This is a simple modal with some text.")),
        button({ kind: "primary", type: "button", "data-action": "close" }, "Close"),
      ),
    ),

    modal(
      { id: "form-modal" },
      content(
        prose(h2("Form modal")),
        form(
          { id: "signup-form" },
          input({
            type: "email",
            name: "email",
            placeholder: "Email",
            required: true,
            leadingIcon: mailOutlineIcon(),
          }),
          input({
            leadingIcon: lockOutlineIcon(),
            minlength: 8,
            placeholder: "Password",
            required: true,
            type: "password",
            passwordStrengthMeter: {
              hintText: "Password strength:",
              strengthText: {
                weak: "Weak",
                fair: "Fair",
                good: "Good",
                strong: "Strong",
              },
            },
          }),
          br(),
          checkbox({
            checkboxPosition: "start",
            contained: true,
            description: span("I have read and agree to Hedia's ", a("Terms and conditions")),
            id: "terms-checkbox",
            required: true,
          }),
        ),
        buttons(
          { arrangement: "vertical" },
          button({ kind: "primary", type: "submit", form: "signup-form" }, "Sign up"),
          button({ kind: "secondary", type: "button", "data-action": "close" }, "Close"),
        ),
      ),
    ),
  ];
}

export function OpenByDefault() {
  return modal(
    { open: true },
    content(
      prose(
        h2("Open modal"),
        p("This is an example of a modal that opens by itself when the page loads."),
        p("It can be closed, but without a button to reopen it, this modal will never be seen again."),
      ),
      button({ kind: "primary", type: "button", "data-action": "close" }, "Close"),
    ),
  );
}