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

import { Survey } from "../../util/survey-utils/survey";
import mainStylesheet from "./MintedUpcPicker.css?inline";
import { GridCell } from "./types";
import { buildGridCells, fetchLocations, getGridDimensions, restructurePlano } from "./util";

const QUESTION_TEXT = /Scan ALL.* Cards out of stocks/i;

const submittedUpcs = new Set<string>();

export const TOGGLE_MODAL_EVENT_TYPE = "toggle-minted-upc-picker-event";

export interface MintedUpcPickerProps {
  pogName: string;
}

export function MintedUpcPicker(props: MintedUpcPickerProps) {
  const [isVisible, setIsVisible] = createSignal(false);
  const [numColumns, setNumColumns] = createSignal(0);
  const [gridCells, setGridCells] = createSignal<GridCell[]>([]);
  const [selectedUpcs, setSelectedUpcs] = createSignal<Set<string>>(new Set());

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

  function toggleCell(cell: GridCell): void {
    if (cell.isDisabled) {
      return;
    }

    setSelectedUpcs((prev) => {
      const next = new Set(prev);
      const isCurrentlySelected = cell.upcs.every((upc) => next.has(upc));
      cell.upcs.forEach((upc) => (isCurrentlySelected ? next.delete(upc) : next.add(upc)));
      return next;
    });
  }

  function handleSubmit(): void {
    const oosUpcs = [...selectedUpcs()];
    const survey = Survey.getInstance();

    oosUpcs.forEach((upc) => {
      if (submittedUpcs.has(upc)) {
        return;
      }

      survey.answer("scan-input", QUESTION_TEXT, upc, { clickAdd: true });
      submittedUpcs.add(upc);
    });

    setSelectedUpcs(new Set<string>());
    setIsVisible(false);
  }

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

    void loadPlanogram();
  });

  async function loadPlanogram(): Promise<void> {
    const planogramLocationsResponse = await fetchLocations(props.pogName);
    const locationData = restructurePlano(planogramLocationsResponse.home_locations);
    const horizontalSectionThresholds = new Set(
      planogramLocationsResponse.planogram.horizontal_section_thresholds,
    );

    const [, maxRowLetter, columnCount] = getGridDimensions(locationData);
    setNumColumns(columnCount);
    setGridCells(
      buildGridCells(locationData, columnCount, maxRowLetter, horizontalSectionThresholds),
    );
  }

  return (
    <section>
      <style>{mainStylesheet}</style>
      <div id="minted-modal-container" hidden={!isVisible()}>
        <div id="minted-modal">
          <div id="minted-grid-container" style={{ "--minted-num-columns": numColumns() }}>
            <For each={gridCells()}>
              {(cell) => (
                <div
                  class="card-cell text-center d-flex flex-column justify-content-center"
                  classList={{
                    disabled: cell.isDisabled,
                    "cell-selected":
                      !cell.isDisabled && cell.upcs.every((upc) => selectedUpcs().has(upc)),
                    "me-1": cell.hasSectionGapRight,
                    "mb-1": cell.hasSectionGapBottom,
                  }}
                  onclick={() => toggleCell(cell)}
                >
                  {cell.locationName}
                </div>
              )}
            </For>
          </div>
          <div id="minted-submit-container">
            <button type="button" onclick={handleSubmit}>
              Submit
            </button>
          </div>
        </div>
      </div>
    </section>
  );
}