/apps/libre/connecting

import { button } from "@hedia/hexui/components/button";
import { content } from "@hedia/hexui/components/content";
import { footer } from "@hedia/hexui/components/footer";
import { form } from "@hedia/hexui/components/form";
import { header } from "@hedia/hexui/components/header";
import { input } from "@hedia/hexui/components/input";
import { navbar } from "@hedia/hexui/components/navbar";
import { prose } from "@hedia/hexui/components/prose";
import { screen } from "@hedia/hexui/components/screen";
import { a, div, h1, h2, img, li, p, ul } from "@hedia/html/elements";
import { chevLeftOutlineIcon, chevRightOutlineIcon } from "@hedia/iconly/outline";

export default {
  connectScreen,
  connectLibreScreen,
  errorScreen,
  connectedScreen,
};

export function connectScreen() {
  return screen(
    header(navbar(a({ href: "#" }, "Close"), h2("CGM"))),
    content(
      { alignment: "top" },
      prose(
        h1("Connect to Freestyle Libre"),
        p("Hedia uses your delayed CGM data to show you personalized graphs and trends. "),
        p("Hedia will get access to the following Libre data:"),
        ul(li("Glucose data")),
        p(
          "For more information on how your CGM data will be processed, see Hedia's privacy notice. You can disconnect your Dexcom account and withdraw your consent at any time.",
        ),
      ),
    ),
    footer(button({ kind: "primary" }, "Connect Libre account")),
  );
}

export function connectLibreScreen() {
  return screen(
    header(navbar(a({ href: "#" }, "Close"), h2("CGM"))),
    content(
      { alignment: "top" },
      prose(
        h1("Connect to Freestyle Libre"),
        p("Enter your LibreLinkUp credentials to connect your Libre account to Hedia Diabetes Assistant."),
      ),
      form(
        { id: "connect-libre-form", spacing: "compact" },
        input({
          type: "email",
          name: "email",
          placeholder: "Email",
          required: true,
        }),
        input({
          placeholder: "Password",
          required: true,
          type: "password",
        }),
      ),
    ),
    footer(
      button({ kind: "primary", type: "submit", form: "connect-libre-form" }, "Continue", chevRightOutlineIcon()),
    ),
  );
}

export function errorScreen() {
  return screen(
    header(navbar(a({ href: "#" }, "Close"), h2("CGM"))),
    content(
      { alignment: "top" },
      prose(
        h1("Connect to Freestyle Libre"),
        p("We were unable to connect your Libre account."),
        p("Please check your email and password and try again. If the problem persists, contact support."),
      ),
    ),
    footer(button({ kind: "secondary" }, chevLeftOutlineIcon(), "Back")),
  );
}

export function connectedScreen() {
  return screen(
    header(navbar(a({ href: "#" }, "Close"), h2("CGM"))),
    content(
      div(
        { class: "align-items-center" },
        img({ src: "/apps/checkmark.gif", width: "256", height: "256" }),
        prose(h2({ align: "center" }, "Freestyle Libre account connected")),
      ),
    ),
  );
}