import "../../sidebar/toolbar.css";
import disabledImg from "../../../images/icons/line.svg";
import { useEffect, useState } from "react";
import { AnimatePresence, motion } from "framer-motion";
import { animationButton } from "../../../utils/animationProps";
import { TButton } from "../../../utils/types";

export const Button: React.FC<any> = ({ button, onClick, active }) => {

  const [hover, setHover] = useState(false)

  const typeButton =
    button.type !== 'fullscreen' && button.type !== 'language'

  function handleClick() {
    onClick()
  }

  return (
    <div >
      <motion.button
        onClick={handleClick}
        onHoverStart={() => setHover(true)}
        onHoverEnd={() => setHover(false)}
        className={button.type === 'exit' ? 'toolbar-button_exit toolbar-button' : 'toolbar-button'}>
        {button.type === "language" ? (
          <span className="language-caption">EN</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 ? button.active : button.inactive}
            </span>
          </motion.div>
        )}
      </AnimatePresence>
    </div>
  );
};
