import { OMSExtension } from "../../common/types/OMSExtension";
import React, { useEffect, useState } from "react";
import { useStore } from "../stores/global-stores";
import { sendIpcMessage } from "../utils/ipcEvent";
import useCallbackOnSuggestionSelect from "../utils/use-callback-on-suggestion-select";

export default function Suggestion({
  suggestion,
  preview,
}: {
  suggestion: OMSExtension;
  preview?: React.ReactNode;
}) {
  const [selectedId, setSelected, pushRoute, setSuggestionPreview] = useStore(
    (states) => [
      states.selectedId,
      states.setSelected,
      states.pushRoute,
      states.setSuggestionPreview,
    ]
  );
  const onDoubleClick = useCallbackOnSuggestionSelect(suggestion);
  return (
    <div
      tabIndex={0}
      onFocus={(e) => {
        console.log("focus", suggestion.id);
        setSelected(suggestion.id);
      }}
      className={`suggestion-item ${
        suggestion.id === selectedId ? "suggestion-selected" : undefined
      }`}
      onDoubleClick={onDoubleClick}
      onKeyDown={(e) => {
        console.log('[suggestion] onKeyDown', e.key);
        if (e.key === "Backspace") {
          document.getElementById("oms-input")?.focus();
        } else if (e.key === "ArrowUp") {
          (
            document.querySelector<HTMLDivElement>(".suggestion-selected")
              ?.previousElementSibling as HTMLDivElement
          )?.focus();
        } else if (e.key === "ArrowDown") { // no need to look at 'tab' key cuz native browser already take care of this action. same for shift tab
          (
            document.querySelector<HTMLDivElement>(".suggestion-selected")
              ?.nextElementSibling as HTMLDivElement
          )?.focus();
        }
      }}
      onKeyPress={(e) => {
        console.log("keyPress", e);
        if (e.key === "Enter") {
          onDoubleClick();
        } else {
          document.getElementById("oms-input")?.focus();
        }
      }}
      onClick={() => {
        if (preview) setSuggestionPreview(preview);
      }}
      onMouseEnter={() => {
        setSelected(suggestion.id);
      }}
      onMouseLeave={() => {}}
    >
      <div
        style={{
          lineHeight: "25px",
        }}
      >
        <img
          src={suggestion.iconPath || "./images/icon-clipboard.svg"}
          className="inline-block h-5 w-5 align-middle"
        />
      </div>
      <div>
        <div
          className="h200"
          style={{
            verticalAlign: "middle",
            lineHeight: "25px",
          }}
        >
          {suggestion.title}{" "}
          <span
            className="h100"
            style={{
              color: "var(--accent04)",
            }}
          >
            {suggestion.subTitle}
          </span>
        </div>
        <div
          className="h100"
          style={{
            color: "var(--accent04)",
          }}
        >
          {suggestion.secondLineTitle}
        </div>
      </div>
    </div>
  );
}