import "./User.css";

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

import userPic from "images/icons/Person.svg";
import chevronDown from "images/icons/ChevronDown.svg";
import control from "images/icons/control.svg";
import controlOff from "images/icons/HandOff.svg";
import microOn from "images/icons/MicroOn.svg";
import microOff from "images/icons/MicroOff.svg";

import {
  popupAnimation,
  userMenuAnimation,
  animationButton,
  transition,
  iconAnimation,
} from "utils/animationProps";

export const User: React.FC<any> = ({
  isAdmin,
  isSidebarWide,
  closeSidebar,
}) => {
  const [hover, setHover] = useState(false);
  const [expand, setExpand] = useState(false);
  const [mute, setMute] = useState(true);
  const [isControl, setControl] = useState(false);

  useEffect(() => {
    setExpand(false);
  }, [closeSidebar]);

  const expandMenu = () => {
    if (isSidebarWide) {
      if (isAdmin) setExpand((prev) => !prev);
    }
  };

  return (
    <>
      <motion.div
        variants={userMenuAnimation}
        animate={expand ? "open" : "closed"}
        className="user-wrapper"
      >
        <div onClick={expandMenu} className="user-container">
          <div className="user">
            <motion.div
              onHoverStart={() => setHover(true)}
              onHoverEnd={() => setHover(false)}
              className="icon-container"
            >
              <img
                alt="иконка пользователя"
                className="user-icon"
                src={userPic}
              ></img>
            </motion.div>
            <motion.span
              initial={false}
              variants={animationButton}
              animate={isSidebarWide ? "show" : "hidden"}
              className="user-name"
            >
              Пользователь
            </motion.span>
          </div>
          {isSidebarWide && (
            <div className="control-elements">
              <AnimatePresence>
                {!isControl && (
                  <motion.div
                    variants={popupAnimation}
                    initial={"hidden"}
                    animate={"show"}
                    exit={"hidden"}
                    className="user-control-caption"
                  >
                    <div className="control-circle"></div>
                    <span className="user-control-caption">Управление</span>
                  </motion.div>
                )}
              </AnimatePresence>
              {isAdmin && (
                <motion.div
                  initial={false}
                  variants={animationButton}
                  animate={isSidebarWide ? "show" : "hidden"}
                  className="icon-container"
                >
                  <motion.img
                    initial={false}
                    transition={transition}
                    variants={iconAnimation}
                    animate={expand ? "open" : "closed"}
                    src={chevronDown}
                    className="arrow-caption"
                  ></motion.img>
                </motion.div>
              )}
            </div>
          )}

        </div>
        {expand && (
          <AnimatePresence>
            <motion.div
              variants={popupAnimation}
              initial={"hidden"}
              animate={"show"}
              exit={"hidden"}
              className="user-button-container"
            >
              <div
                onClick={() => setControl((prev) => !prev)}
                style={{ height: "40px" }}
                className="button button-secondary"
              >
                <img src={isControl ? control : controlOff}></img>
                <span>
                  {isControl ? "Передать управление" : "Вернуть управление"}
                </span>
              </div>
              <div
                style={{ width: "40px", height: "40px", padding: "16px" }}
                onClick={() => setMute((prev) => !prev)}
                className="button button-teritary"
              >
                <img
                  alt="иконка звук выкл"

                  src={mute ? microOn : microOff}
                  className="mic"
                ></img>
              </div>
            </motion.div>
          </AnimatePresence>
        )}
      </motion.div>
      <AnimatePresence initial={false}>
        {!isSidebarWide && hover && (
          <motion.div
            variants={animationButton}
            initial={"hidden"}
            animate={"show"}
            exit={"hidden"}
            className="toolbar-button-description-container toolbar-button-description-user"
          >
            <span className="toolbar-button-description-triangle"></span>
            <span className="toolbar-button-description-rectangle">
              Пользователь
            </span>
          </motion.div>
        )}
      </AnimatePresence>
    </>
  );
};
