/apps/dexcom/connecting

import { button, buttons } from "@hedia/hexui/components/button";
import { checkbox } from "@hedia/hexui/components/checkbox";
import { content } from "@hedia/hexui/components/content";
import { footer } from "@hedia/hexui/components/footer";
import { header } from "@hedia/hexui/components/header";
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 { a, fieldset, form, h1, h2, img, li, p, ul } from "@hedia/html/elements";
import { chevLeftOutlineIcon, chevRightOutlineIcon } from "@hedia/iconly/outline";

export default {
  delayScreen,
  alarmsScreen,
  connectScreen,
};

export function delayScreen() {
  return screen(
    header(navbar(a({ href: "#" }, "Close"), h2("CGM"))),
    content(
      img({ src: "/delay.svg" }),
      prose(
        h2("3 hour delay on CGM data"),
        p("Data from your CGM sensor is delivered to Hedia Diabetes Assistant with a 3-hour delay."),
      ),
    ),
    footer(
      buttons(
        { arrangement: "horizontal" },
        button({ kind: "secondary" }, chevLeftOutlineIcon(), "Back"),
        button({ kind: "primary" }, "Next", chevRightOutlineIcon()),
      ),
    ),
  );
}

export function alarmsScreen() {
  return screen(
    header(navbar(a({ href: "#" }, "Close"), h2("CGM"))),
    content(
      img({ src: "/alarms.svg" }),
      prose(
        h2("No glucose alarms"),
        p(
          "Hedia Diabetes Assistant does NOT give alarms related to high or low glucose.  Continue using your CGM app alongside Hedia Diabetes Assistant.",
        ),
      ),
    ),
    footer(
      buttons(
        { arrangement: "horizontal" },
        button({ kind: "secondary" }, chevLeftOutlineIcon(), "Back"),
        button(
          { kind: "primary", "data-target": "#modal", "data-action": "showModal" },
          "Next",
          chevRightOutlineIcon(),
        ),
      ),
      modal(
        { id: "modal" },
        content(
          prose(
            h2("Safety information"),
            p("Please accept these limitations when using your CGM with this app."),
          ),
          form(
            { id: "form" },
            fieldset(
              checkbox({
                id: "delayed",
                heading: "CGM data is delayed",
                description: "Data from your CGM sensor is delivered to Hedia with a 3-hour delay.",
                required: true,
              }),
              checkbox({
                id: "alarms",
                heading: "No glucose alarms",
                description: "No alarms related to high or low glucose.",
                required: true,
              }),
            ),
          ),
          buttons(
            { arrangement: "vertical" },
            button({ kind: "primary", type: "submit", form: "form" }, "Continue"),
            button({ kind: "secondary", type: "button", "data-action": "close" }, "Cancel"),
          ),
        ),
      ),
    ),
  );
}

export function connectScreen() {
  return screen(
    header(navbar(a({ href: "#" }, "Close"), h2("CGM"))),
    content(
      img({ src: "/apps/dexcom/dexcom-logo.png", width: "123", height: "41" }),
      prose(
        h1("Connect your Dexcom Account"),
        p("Hedia uses your delayed CGM data to show you personalized graphs and trends. "),
        p("Hedia will get access to the following Dexcom data:"),
        ul(li("User ID, 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 with Dexcom®")),
  );
}