import React from "react";
import "./KeyboardShortcuts.styles.scss";
import { isMac } from "../../utils/shortcuts";
import FilterAltOutlinedIcon from "@mui/icons-material/FilterAltOutlined";
import { ReactComponent as PanelViewIcon } from "../../assets/panelView.svg";
import KeyboardRoundedIcon from "@mui/icons-material/KeyboardRounded";
import AddIcon from "@mui/icons-material/Add";

/* Card stack + specs from Figma IA-Design-System-v3.1 node 49243:155828 (cards region only) */
const CARD_ITEMS = [
  {
    id: "item-1",
    title: "Side Navigation",
    description: "Quick Way to Toggle the Sidebar Menu",
    iconType: "panel",
    shortcutLetter: "B",
  },
  {
    id: "item-2",
    title: "Filter",
    description: "Instantly Opens or Closes the Filtering Panel",
    iconType: "filter",
    shortcutLetter: "F",
  },
  {
    id: "item-3",
    title: "Shortcut Setting",
    description: "Instant Access to the Keyboard Shortcut Settings",
    iconType: "keyboard",
    shortcutLetter: "K",
  },
];

export const ShortcutLandingPage = ({
  playEntrance = false,
  setIsShowShortCutLandingPage,
  setIsShowShortCutModal,
}) => {
  return (
    <div
      className={`shortcut-landing-page-content${
        playEntrance ? " shortcut-landing-entrance" : ""
      }`}
    >
      {CARD_ITEMS.map((card) => (
        <div
          className={`shortcut-landing-page-content-item ${card.id}`}
          key={card.id}
        >
          <div className="background-image"></div>
          <ShortcutHeader
            iconType={card.iconType}
            shortcutLetter={card.shortcutLetter}
          />
          <ShortcutContent
            contentHeader={card.title}
            contentDescription={card.description}
          />
        </div>
      ))}
    </div>
  );
};

const ShortcutHeader = ({ iconType, shortcutLetter }) => {
  const modifierLabel =
    iconType === "filter" ? (isMac ? "⌥" : "Alt") : isMac ? "⌘" : "Ctrl";

  return (
    <div className={`content-header header-${iconType}`}>
      <div className="content-header-icon">
        {iconType === "filter" ? (
          <FilterAltOutlinedIcon sx={{ fontSize: 24 }} />
        ) : iconType === "keyboard" ? (
          <KeyboardRoundedIcon sx={{ fontSize: 24 }} />
        ) : (
          <PanelViewIcon />
        )}
      </div>
      <div className="content-header-buttons">
        <div className="content-header-buttons-item content-header-buttons-item--modifier">
          <span className="content-header-buttons-item-text">
            {modifierLabel}
          </span>
        </div>
        <div className="content-header-plus" aria-hidden>
          <AddIcon sx={{ fontSize: 16, color: "#60697d" }} />
        </div>
        <div className="content-header-buttons-item content-header-buttons-item--letter">
          <span className="content-header-buttons-item-text">
            {shortcutLetter}
          </span>
        </div>
      </div>
    </div>
  );
};

const ShortcutContent = ({ contentHeader, contentDescription }) => {
  return (
    <div className="content-content">
      <span className="content-content-header-title">{contentHeader}</span>
      <span className="content-content-header-description">
        {contentDescription}
      </span>
    </div>
  );
};
