import "../../sidebar/toolbar.css";
import disabledImg from "../../../images/icons/line.svg";
import { useState } from "react";
import { AnimatePresence, motion } from "framer-motion";
import { animationButton } from "../../../utils/animationProps";
import { useTranslation } from "react-i18next";
import { useAppSelector } from "../../../hooks/redux";
export const Button: React.FC<any> = ({ button, onClick, active }) => {
  const [hover, setHover] = useState(false);
  const { currentLang } = useAppSelector((state) => state.languageReducer);

  const typeButton = button.type !== "fullscreen" && button.type !== "language";

  function handleClick() {
    onClick();
  }

  const { t } = useTranslation();

  return (
    <div>
      <motion.button
        tabIndex={-1}
        onClick={handleClick}
        onFocus={(e) => e.target.blur()} /// disable default browser focus when key is pressed
        onHoverStart={() => setHover(true)}
        onHoverEnd={() => setHover(false)}
        className={
          button.type === "exit"
            ? "toolbar-button_exit toolbar-button"
            : "toolbar-button"
        }
      >
        {button.type === "language" ? (
          <span className="language-caption">{currentLang.toUpperCase()}</span>
        ) : (
          <img alt="icon" className="toolbar-icon" src={button.icon} />
        )}
        {active && typeButton && (
          <img
            alt="iconDisabled"
            className="toolbar-disabled"
            src={disabledImg}
          ></img>
        )}
      </motion.button>
      <AnimatePresence>
        {hover && (
          <motion.div
            variants={animationButton}
            initial={"hidden"}
            animate={"show"}
            exit={"hidden"}
            className="toolbar-button-description-container"
          >
            <span className="toolbar-button-description-triangle"></span>
            <span className="toolbar-button-description-rectangle">
              {active ? t(button.active) : t(button.inactive)}
            </span>
          </motion.div>
        )}
      </AnimatePresence>
    </div>
  );
};
