import "./toolbar.css";
import React, { useState, useEffect, useCallback } from "react";
import { UserList } from "../UserList/UserList";
import { FullscreenButton } from "../ui/FullscreenButton/FullscreenButton";
import { PopupShare } from "../PopupShare/PopupShare";
import { ExitPopup } from "../ExitPopup/ExitPopup";
import { ControlPanel } from "../ControlPanel/ControlPanel";
import { AnimatePresence, motion } from "framer-motion";
import { sidebarVariants, popupAnimation } from "../../utils/animationProps";


type link = {
  id: string;
};
const userLocal = {
  id: Math.floor(Math.random() * 100),
};

export const Sidebar: React.FC<any> = ({
  closeStream,
  data,
  clients,
  localUser,
  provideRef,
  handleMute,
  handleControl,
  handleAdmin,
  sendRequset,
  message,
  close,
  handleReturnControl,
}) => {
  const [open, setOpen] = useState(true);
  const [popup, setPopup] = useState({
    popup1: false,
    popup2: false,
  });


  console.log(close, 'click')

  const [selected, setSelected] = useState(false);
  const [icon, setIcon] = useState("");

  const [isMuted, setMuted] = useState(true);

  useCallback(() => {
    handleAdmin();
  }, [clients]);

  useEffect(() => {
    handleMute(isMuted, localUser.id);
  }, [isMuted]);

  const handleMuteClick = () => {
    setMuted((prev) => !prev);
  };

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

  function handleClosePopups() {
    setPopup({
      popup1: false,
      popup2: false,
    });
  }

  function handleOpenSharePopup() {
    setPopup({
      popup1: true,
      popup2: false,
    });
  }

  function handleOpenExitPopup() {
    setPopup({
      popup1: false,
      popup2: true,
    });
  }

  function closeSideBar() {
    setOpen((prev) => !prev);
    setSelected(false);
  }

  useEffect(() => {
    setOpen(false)
  }, [close]);

  useEffect(() => () => unmountComponent(), []);

  function unmountComponent() {
    setOpen(false);
    setPopup({
      popup1: false,
      popup2: false,
    });
  }



  return (
    <div>
      <motion.div
        animate={open ? "open" : "closed"}
        variants={sidebarVariants}
        className="toolbar-container"
      >
        <div className="toolbar-field">
          <div className="toolbar-field-part">
            <FullscreenButton></FullscreenButton>
            <UserList
              handleReturnControl={handleReturnControl}
              selected={selected}
              setSelected={setSelected}
              message={message}
              sendControlRequest={sendRequset}
              localUser={localUser}
              audio={provideRef}
              users={clients}
              handleControl={handleControl}
            ></UserList>
          </div>
          <ControlPanel
            isMuted={isMuted}
            user={userLocal.id}
            handleMute={handleMuteClick}
            handleOpenSharePopup={handleOpenSharePopup}
            handleOpenExitPopup={handleOpenExitPopup}
          ></ControlPanel>
        </div>
        <div onClick={closeSideBar} className="toolbar-open-button">
          <span className="toolbar-open-button-icon"></span>
        </div>
      </motion.div>
      <AnimatePresence>
        {popup.popup1 && (
          <motion.div
            key={1}
            variants={popupAnimation}
            initial={"hidden"}
            animate={"show"}
            exit={"hidden"}
          >
            <PopupShare data={data} setClose={handleClosePopups}></PopupShare>
          </motion.div>
        )}

        {popup.popup2 && (
          <motion.div
            key={2}
            variants={popupAnimation}
            initial={"hidden"}
            animate={"show"}
            exit={"hidden"}
          >
            <ExitPopup
              onExit={closeStream}
              setClose={handleClosePopups}
            ></ExitPopup>
          </motion.div>
        )}
      </AnimatePresence>
    </div>
  );
};
