import "components/pages/Stream/Sidebar/Sidebar.css";
import { useState } from "react";

import { AnimatePresence, motion } from "framer-motion";
import { useTranslation } from "react-i18next";

import { animationButton } from "utils/animationProps";
import { useAppSelector } from "hooks/redux";

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

  const [hover, setHover] = useState(false);
  const { currentLang } = useAppSelector((state) => state.languageReducer);

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

  const { t } = useTranslation();

  return (
    <>
      <motion.div
        onHoverStart={() => setHover(true)}
        onHoverEnd={() => setHover(false)}
        className={
          button.type === "exit"
            ? "toolbar-button_exit toolbar-button"
            : "toolbar-button"
        }
      >
        <img alt="icon" className="toolbar-icon" src={button.icon} />
      </motion.div>
      <motion.span
        initial={false}
        variants={animationButton}
        animate={isSidebarWide ? "show" : "hidden"}
        className="toolbar-button-caption"
      >
        {active ? t(button.active) : t(button.inactive)}
      </motion.span>
      {!button.noHover && (
        <AnimatePresence initial={false}>
          {!isSidebarWide && 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>
      )}
    </>
  );
};
