import { For, createSignal, onMount } from "solid-js";

import { Survey } from "../../util/survey-utils/survey";
import mainStylesheet from "./IcuUpcPicker.css?inline";
import {
  EYEGLASS_STRENGTH_COLORS,
  TGridUpcs,
  getIcuFrontPanelUpcs,
  getIcuLeftPanelUpcs,
  getIcuRightPanelUpcs,
  getWinkPanelUpcs,
} from "./util";

export const TOGGLE_MODAL_EVENT_TYPE = "toggle-icu-picker-event";

const ENDCAP_OOS_COUNT_QUESTION_TEXT =
  "Upon COMPLETION, how many EMPTY PEGHOOKS (out of stocks) were on the ICU Eyecare ENDCAP Display?";
const ENDCAP_OOS_SCAN_QUESTION_TEXT =
  "Scan each out of stock item using your Store specific Scan Guide for the ICU ENDCAP Fixture.";

function getOosCountBucketLabel(count: number): string {
  if (count <= 10) return "1-10";
  if (count <= 20) return "11-20";
  if (count <= 30) return "21-30";
  if (count <= 40) return "31-40";
  if (count <= 49) return "41-49";
  return "50 or more";
}

export function icuPickerReMountRequest(): void {
  window.dispatchEvent(new CustomEvent(TOGGLE_MODAL_EVENT_TYPE));
}

function PlanogramGrid(props: { gridUpcs: TGridUpcs; class?: string; selectedUpcs: Set<string> }) {
  const [colCount, strengthGroups] = props.gridUpcs;

  return (
    <div class={props.class}>
      <For each={Object.entries(strengthGroups)}>
        {([strength, upcs]) => (
          <ul class="panel" style={{ "grid-template-columns": `repeat(${colCount}, 1fr)` }}>
            <For each={upcs}>
              {(upc) => (
                <li
                  classList={{ selected: props.selectedUpcs.has(upc) }}
                  data-upc={upc}
                  style={{ "background-color": EYEGLASS_STRENGTH_COLORS[strength] }}
                ></li>
              )}
            </For>
          </ul>
        )}
      </For>
    </div>
  );
}

export function IcuUpcPicker() {
  const [isVisible, setIsVisible] = createSignal(true);
  const [selectedIcuUpcs, setSelectedIcuUpcs] = createSignal<Set<string>>(new Set());
  const [selectedWinkUpcs, setSelectedWinkUpcs] = createSignal<Set<string>>(new Set());

  function toggleVisible(): void {
    setIsVisible((prev) => !prev);
  }

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

  onMount(() => {
    window.addEventListener(TOGGLE_MODAL_EVENT_TYPE, toggleVisible);
    document.addEventListener("keydown", (event) => {
      if (event.key === "Escape") {
        setIsVisible(false);
      }
    });
  });

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

    const isIcu = targetElement.closest(".icu-container") !== null;
    const isWink = targetElement.closest(".wink-container") !== null;
    if (!isIcu && !isWink) {
      return;
    }

    const setSelectedUpcs = isIcu ? setSelectedIcuUpcs : setSelectedWinkUpcs;
    setSelectedUpcs((prev) => {
      const next = new Set(prev);
      next.has(upc) ? next.delete(upc) : next.add(upc);
      return next;
    });
  }

  function handleSubmit(): void {
    const survey = Survey.getInstance();
    const oosUpcs = selectedIcuUpcs();

    survey.answer("radio", ENDCAP_OOS_COUNT_QUESTION_TEXT, getOosCountBucketLabel(oosUpcs.size));

    oosUpcs.forEach((upc) => {
      console.log(`Submitting ICU OOS UPC: ${upc}`);
      survey.answer("scan-input", ENDCAP_OOS_SCAN_QUESTION_TEXT, upc, { clickAdd: true });
    });

    const submittedRowCount = survey.getInventoryGridRowCount(ENDCAP_OOS_SCAN_QUESTION_TEXT);
    if (submittedRowCount === null) {
      throw new Error(
        "[handleSubmit] No inventory-grid tbody found for the ICU Endcap OOS scan question.",
      );
    }

    if (submittedRowCount !== oosUpcs.size) {
      alert(
        `ICU Endcap OOS scan mismatch: selected ${oosUpcs.size} UPC(s) but the submitted grid has ${submittedRowCount} row(s).`,
      );
    }

    setIsVisible(false);
  }

  function handleWinkSubmit(): void {
    alert("Dummy submit button clicked!");
  }

  return (
    <div classList={{ "visually-hidden": !isVisible() }} onClick={handleClick}>
      <style>{mainStylesheet}</style>
      <div id="modal-icu-upc-picker">
        <div id="grids-container">
          <div id="icu-endcap-planogram" class="icu-container planogram">
            <h1 style="text-align: center; color: #d7d7d7;">ICU Endcap</h1>
            <div class="planogram-grids">
              <PlanogramGrid
                gridUpcs={icuLeftPanelUpcs}
                class="grid-container"
                selectedUpcs={selectedIcuUpcs()}
              />
              <PlanogramGrid
                gridUpcs={icuFrontPanelUpcs}
                class="grid-container"
                selectedUpcs={selectedIcuUpcs()}
              />
              <PlanogramGrid
                gridUpcs={icuRightPanelUpcs}
                class="grid-container"
                selectedUpcs={selectedIcuUpcs()}
              />
            </div>
            <button onClick={handleSubmit} type="button" id="upc-submit-btn">
              Submit
            </button>
          </div>
          <div id="wink-sidecap-planogram" class="wink-container planogram">
            <h1 style="text-align: center; color: #d7d7d7">Wink Sidecap</h1>
            <div class="planogram-grids">
              <PlanogramGrid
                gridUpcs={winkPanelUpcs}
                class="grid-container"
                selectedUpcs={selectedWinkUpcs()}
              />
            </div>
            <button onClick={handleWinkSubmit} type="button" id="wink-submit-btn">
              Submit
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}