import { PopupUserControl } from "../../popupUserControl/popupUserControl";
import { AnimatePresence, motion } from "framer-motion";
import { useState, useEffect } from "react";
import { animationButton } from "../../../utils/animationProps";
import { TUserButton } from "../../../utils/types";
import iconUser from "../../../images/icons/user.svg";

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

export const UsetButton: React.FC<TUserButton> = ({
  user,
  audio,
  selected,
  setSelected,
  isAdmin,
  localUser,
  sendControlRequest,
  handleControl,
  message,
  handleReturnControl,
}) => {
  const [hover, setHover] = useState(false);
  const [isMuted, setMuted] = useState(false);
  const [notification, setNotification] = useState(false);

  const isOwn = localUser.id === user.id;
  const admin = isAdmin(user);
  console.log(admin);

  function handleClasses() {
    if (isOwn) {
      return "user-button user-button-you";
    } else if (user.admin) {
      return "user-button user-button-admin";
    } else {
      return "user-button user-button-default";
    }
  }

  useEffect(() => {
    setNotification(true);
  }, [message]);

  function handleSelect() {
    if (user.id === localUser.id) {
      return;
    } else {
      setSelected(user.id);
      setHover(false);
    }
  }
  return (
    <div className="toolbar-button-area">
      <audio id={user.id} ref={(ref) => audio(ref, user.id)} autoPlay></audio>
      <AnimatePresence mode="wait">
        {selected === user.id && (
          <motion.div
            variants={container}
            initial={"hidden"}
            animate={"show"}
            exit={"hidden"}
          >
            <PopupUserControl
              isMuted={isMuted}
              setMuted={setMuted}
              setNotification={setNotification}
              localUser={localUser}
              sendControlRequest={sendControlRequest}
              handleReturnControl={handleReturnControl}
              handleControl={handleControl}
              isAdmin={isAdmin}
              user={user}
            ></PopupUserControl>
          </motion.div>
        )}
      </AnimatePresence>
      <motion.button
        onHoverStart={() => setHover(true)}
        onHoverEnd={() => setHover(false)}
        onClick={() => handleSelect()}
        className={handleClasses()}
      >
        <img className="toolbar-icon" src={iconUser} />
      </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">
              {user.id === localUser.id ? (
                "Вы"
              ) : (
                <>{user.admin ? "Администратор" : "user"}</>
              )}
            </span>
          </motion.div>
        )}
      </AnimatePresence>
      {notification && (
        <>
          {message === user.id && (
            <span className="toolbar-notification"></span>
          )}
        </>
      )}
    </div>
  );
};
