import { inputText } from "@lib/_common/util/surveyUtil";
import { addStyles } from "@lib/setupRoot";
import { createSignal, onMount } from "solid-js";
import AppStylesheet from "./App.css?inline";
import {
  getDiopterClassname,
  getIcuFrontPanelUpcs,
  getIcuLeftPanelUpcs,
  getIcuRightPanelUpcs,
  getWinkPanelUpcs,
} from "./util";

const ICU_OOS_TEXT =
  "Scan each out of stock item using your Store specific Scan Guide for the ICU ENDCAP Fixture.";
// const WINK_OOS_TEXT =
//   "SCAN each out of stock item using your Store specific Scan Guide for the ICU Wink SIDECAP Display.";

export function AppIcuPicker() {
  const [isAppVisible, setIsAppVisible] = createSignal(true);

  onMount(() => {
    addStyles(AppStylesheet);
  });

  const selectedIcuUpcs: string[] = [];
  const selectedWinkUpcs: string[] = [];

  const icuLeftPanelUpcs = getIcuLeftPanelUpcs();
  const icuFrontPanelUpcs = getIcuFrontPanelUpcs();
  const icuRightPanelUpcs = getIcuRightPanelUpcs();
  const winkPanelUpcs = getWinkPanelUpcs();

  function handleClick(event: MouseEvent) {
    const targetElement = event.target as HTMLLIElement;
    const upc = targetElement.dataset.upc;
    if (upc === undefined) {
      return;
    }

    targetElement.classList.toggle("selected");

    if (targetElement.closest(".icu-container")) {
      selectedIcuUpcs.push(upc);
    } else if (targetElement.closest(".wink-container")) {
      selectedWinkUpcs.push(upc);
    }
  }

  function handleSubmit() {
    selectedIcuUpcs.forEach((upc) => inputText(ICU_OOS_TEXT, upc, { clickSubmit: true }));

    setIsAppVisible(() => false);
    alert(`${selectedIcuUpcs.length} total ICU items OOS`);
  }

  return (
    <div
      classList={{
        "visually-hidden": !isAppVisible(),
      }}
      onClick={handleClick}
    >
      <div id="modal-icu-upc-picker" class="">
        <div id="grids-container">
          <div class="icu-container parent-container">
            <div class="top-row-flex-container">
              <ul class="top-row-peg">
                <li data-upc="078041196938" style="background-color: #d9d9d9"></li>
                <li data-upc="078041196921" style="background-color: #b6a381"></li>
                <li data-upc="078041143871" style="background-color: #313131"></li>
                <li data-upc="078041143857" style="background-color: #7e3f00"></li>
              </ul>
              <ul class="top-row-peg">
                <li data-upc="078041204473"></li>
              </ul>
              <ul class="top-row-peg">
                <li data-upc="078041142867" style="background-color: #18006e"></li>
                <li data-upc="078041129233" style="background-color: #444444"></li>
              </ul>
              <ul class="top-row-peg">
                <li data-upc="078041073062">R-Kit</li>
              </ul>
            </div>
            <hr />
            <ul id="left-panel" class="panel">
              {icuLeftPanelUpcs.map((upc, idx) => (
                <li data-upc={upc} class={getDiopterClassname(idx, "icu")}></li>
              ))}
            </ul>
          </div>
          <div id="front-panel-flex-container" class="icu-container parent-container">
            <h1 style="text-align: center; color: #d7d7d7;">ICU Plano</h1>
            <ul id="front-panel" class="panel">
              {icuFrontPanelUpcs.map((upc, idx) => (
                <li data-upc={upc} class={getDiopterClassname(idx, "icu")}></li>
              ))}
            </ul>
            <button onClick={handleSubmit} type="button" id="upc-submit-btn">
              Submit
            </button>
          </div>
          <div class="icu-container parent-container">
            <div class="top-row-flex-container">
              <ul class="top-row-peg">
                <li
                  data-upc="078041227755"
                  style="background: url('https://static.mmonj.com/survey-scripts/RMS/src/apps/icu-upc-picker/images/IMG-8134.jpg'); background-size: contain;"
                ></li>
                <li
                  data-upc="078041227724"
                  style="background: url('https://static.mmonj.com/survey-scripts/RMS/src/apps/icu-upc-picker/images/IMG-8135.jpg'); background-size: contain;"
                ></li>
                <li
                  data-upc="078041227731"
                  style="background: url('https://static.mmonj.com/survey-scripts/RMS/src/apps/icu-upc-picker/images/IMG-8136.jpg'); background-size: contain;"
                ></li>
                <li
                  data-upc="078041227748"
                  style="background: url('https://static.mmonj.com/survey-scripts/RMS/src/apps/icu-upc-picker/images/IMG-8137.jpg'); background-size: contain;"
                ></li>
              </ul>
              <ul class="top-row-peg">
                <li data-upc="078041060321" style="background-color: #757575"></li>
                <li data-upc="078041060338" style="background-color: #a09063"></li>
                <li data-upc="078041129233" style="background-color: #77baf1"></li>
              </ul>
              <ul class="top-row-peg">
                <li data-upc="078041073062">R-Kit</li>
              </ul>
              <ul class="top-row-peg">
                <li data-upc="078041227762"></li>
              </ul>
            </div>
            <hr />
            <ul id="right-panel" class="panel">
              {icuRightPanelUpcs.map((upc, idx) => (
                <li data-upc={upc} class={getDiopterClassname(idx, "icu")}></li>
              ))}
            </ul>
          </div>
          <div class="wink-container parent-container">
            <h1 style="text-align: center; color: #d7d7d7">Wink</h1>
            <ul id="wink-panel" class="panel">
              {winkPanelUpcs.map((upc, idx) => (
                <li data-upc={upc} class={getDiopterClassname(idx, "wink")}></li>
              ))}
            </ul>
          </div>
        </div>
      </div>
    </div>
  );
}