import { inputText } from "@lib/_common/util/surveyUtil";
import { addStyles } from "@lib/setupRoot";
import { createSignal, onMount } from "solid-js";
import stylesheetMain from "./App.css?inline";

export function AppIcuPickerT3277() {
  const [isAppVisible, setIsAppVisible] = createSignal(true);
  const upcsPicked = new Set<string>();

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

  function handleSubmit() {
    upcsPicked.forEach((upc) => {
      inputText("Scan each out of stock item using your Scan Guide.", upc, {
        clickSubmit: true,
        isRequireVisible: true,
      });
      setIsAppVisible(() => false);
    });
  }

  return (
    <div classList={{ "visually-hidden": !isAppVisible() }}>
      <div id="modal-icu-upc-picker">
        <div id="grids-container">
          <div class="front-panel-flex-container">
            <ul class="panel">
              <ListItem upc={"078041227632"} upcsPicked={upcsPicked}></ListItem>
              <ListItem upc={"078041227625"} upcsPicked={upcsPicked}></ListItem>
              <ListItem upc={"078041227618"} upcsPicked={upcsPicked}></ListItem>
              <ListItem upc={"078041227595"} upcsPicked={upcsPicked}></ListItem>
              <ListItem upc={"078041227588"} upcsPicked={upcsPicked}></ListItem>

              <ListItem upc={"078041227694"} upcsPicked={upcsPicked}></ListItem>
              <ListItem upc={"078041227717"} upcsPicked={upcsPicked}></ListItem>
              <ListItem upc={"078041227687"} upcsPicked={upcsPicked}></ListItem>
              <ListItem upc={"078041227663"} upcsPicked={upcsPicked}></ListItem>
              <ListItem upc={"078041227656"} upcsPicked={upcsPicked}></ListItem>

              <ListItem upc={"078041140702"} upcsPicked={upcsPicked}></ListItem>
              <ListItem upc={"078041140696"} upcsPicked={upcsPicked}></ListItem>
              <ListItem upc={"078041140689"} upcsPicked={upcsPicked}></ListItem>
              <ListItem upc={"078041140665"} upcsPicked={upcsPicked}></ListItem>
              <ListItem upc={"078041140658"} upcsPicked={upcsPicked}></ListItem>

              <ListItem upc={"078041128946"} upcsPicked={upcsPicked}></ListItem>
              <ListItem upc={"078041128939"} upcsPicked={upcsPicked}></ListItem>
              <ListItem upc={"078041128922"} upcsPicked={upcsPicked}></ListItem>
              <ListItem upc={"078041128908"} upcsPicked={upcsPicked}></ListItem>
              <ListItem upc={"078041128892"} upcsPicked={upcsPicked}></ListItem>
            </ul>
          </div>
        </div>
        <button type="button" onClick={handleSubmit}>
          Submit
        </button>
      </div>
    </div>
  );
}

interface ListItemProps {
  upc: string;
  upcsPicked: Set<string>;
}

function ListItem(props: ListItemProps) {
  const [isSelected, setIsSelected] = createSignal(false);

  function handleClick() {
    setIsSelected((prevSelected) => !prevSelected);
    if (isSelected()) {
      props.upcsPicked.add(props.upc);
    } else {
      props.upcsPicked.delete(props.upc);
    }
  }

  return (
    <li onClick={handleClick} classList={{ selected: isSelected() }} data-upc={props.upc}></li>
  );
}