import "./KeyboardShortcuts.styles.scss";
import React, { useState, useMemo } from "react";
import { Input } from "../Input";
import { Tabs } from "../Tabs";
import { ReactComponent as SearchIcon } from "../../assets/search.svg";
import { isMac } from "../../utils/shortcuts";
import { useShortcut } from "../Shortcuts/useShortcut";
import CloseRoundedIcon from "@mui/icons-material/CloseRounded";

const ITEM_HEIGHT = 57;
const CHROME_HEIGHT = 172;
const MIN_HEIGHT = 400;
const MAX_HEIGHT = 620;

const Keycap = ({ label }) => {
  return (
    <div className="keycap">
      <span className="keycap-label">{label}</span>
    </div>
  );
};

const filterShortcuts = (shortcuts, searchValue) => {
  if (!searchValue) return shortcuts;
  const term = searchValue.toLowerCase();
  return shortcuts.filter(
    (s) =>
      s.title.toLowerCase().includes(term) ||
      s.description.toLowerCase().includes(term)
  );
};

const ShortcutList = ({ shortcuts, searchValue }) => {
  const filtered = filterShortcuts(shortcuts, searchValue);
  return (
    <div className="list-container">
      {filtered.map((shortcut, index) => (
        <div key={index} className={`list-item ${shortcut?.onClick ? "pointer" : ""}`}>
          <div className="list-item-content">
            <div className="list-item-title">{shortcut.title}</div>
            <div className="list-item-description">{shortcut.description}</div>
          </div>
          <div className="list-item-keys">
            {shortcut.keys.map((key, keyIndex) => (
              <Keycap key={keyIndex} label={key} />
            ))}
          </div>
        </div>
      ))}
    </div>
  );
};

export const ShortcutModal = ({open, onClose, shortcutGroups}) => {
  const [activeTab, setActiveTab] = useState("opt1");
  const [searchValue, setSearchValue] = useState("");

  const modalHeight = useMemo(() => {
    const maxItems =
      shortcutGroups?.reduce((max, group) => {
        return Math.max(max, group?.data?.length || 0);
      }, 0) || 0;
    return Math.min(MAX_HEIGHT, Math.max(MIN_HEIGHT, maxItems * ITEM_HEIGHT + CHROME_HEIGHT));
  }, [shortcutGroups]);

  return (
    open ? (
      <>
        <div aria-hidden="true" className="modal-overlay"></div>
        <div className="modal-wrapper" style={{ height: modalHeight }}>
          <div
            className="close-icon-container"
            onClick={onClose}
          >
            <CloseRoundedIcon fontSize="small" sx={{ color: "#60697D" }} />
          </div>
          <div className="modal-content">
            <div className="search-bar">
              <Input
                id=""
                leftIcon={<SearchIcon />}
                name=""
                onChange={(e) => setSearchValue(e.target.value)}
                placeholder="Search"
                type="text"
                value={searchValue}
              />
            </div>

            <div className="tab-items">
              <Tabs
                orientation="horizontal"
                tabNames={shortcutGroups}
                tabPanels={shortcutGroups?.map((tab) => (
                  <ShortcutList shortcuts={tab.data} searchValue={searchValue} />
                ))}
                value={activeTab}
                onChange={(e, value) => {
                  setActiveTab(value);
                }}
              />
            </div>
          </div>
          <div className="modal-footer">
            <div className="modal-footer-content-right">
              <div className="modal-footer-content-right-button">
                <Keycap label="esc" />
              </div>
              <span className="modal-footer-content-right-text">Close</span>
            </div>
          </div>
        </div>
      </>
    )
      : null
  );
};
