import en from "./EN.svg";
import ru from "./RU.svg";


import { useEffect, useState } from "react";
import { AnimatePresence, motion } from "framer-motion";

import { useAppDispatch, useAppSelector } from "hooks/redux";
import { languageSlice } from "store/reducers/languageSlice";

import { Button } from "components/shared/Button/Button";

const container = {
  hidden: {
    opacity: 0,
    transition: { duration: 0.2, ease: "easeOut" },
  },
  show: {
    opacity: 1,
    transition: { delay: 0.15, duration: 0.2, ease: "easeIn" },
  },
  exit: {
    opacity: 0,
    transition: { duration: 0.2, ease: "easeOut" },
  },
};

export const LanguageButton: React.FC<any> = ({ hover, setHover, isSidebarWide }) => {
  const { handleChangeLanguage } = languageSlice.actions;
  const { currentLang } = useAppSelector((state) => state.languageReducer);
  const dispatch = useAppDispatch()

  const [open, setOpen] = useState(false);
  const [button, setButton] = useState({
    icon: currentLang === 'en' ? en : ru,
    active: "language-control-btn",
    inactive: "language-control-btn",
    type: "language",
  });

  useEffect(() => {
    setButton({
      icon: currentLang === 'en' ? en : ru,
      active: "language-control-btn",
      inactive: "language-control-btn",
      type: "language",
    })
  }, [currentLang])


  const handleClick = () => {
    if (currentLang === 'en') {
      dispatch(handleChangeLanguage('ru'))
    } else {
      dispatch(handleChangeLanguage('en'))
    }

  }


  return (
    <div onClick={handleClick} className="toolbar-button-area">
      <Button isSidebarWide={isSidebarWide} button={button}></Button>
      <AnimatePresence>
        {open && (
          <motion.div
            variants={container}
            initial={"hidden"}
            animate={"show"}
            exit={"hidden"}
          >
          </motion.div>
        )}
      </AnimatePresence>
    </div>
  );
};
