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

import { UserList } from "components/pages/Stream/UserList/UserList";
import { FullscreenButton } from "components/pages/Stream/FullscreenButton/FullscreenButton";
import { PopupShare } from "components/pages/Stream/PopupShare/PopupShare";
import { PopupExit } from "components/pages/Stream/PopupExit/PopupExit";
import { ControlPanel } from "../ControlPanel/ControlPanel";
import { WideSidebarButton } from "components/pages/Stream/WideSidebarButton/WideSidebarButton";

import {
  sidebarVariants,
  popupAnimation,
  wideSidebarVariants,
  wideSidebarAdminVariants,
} from "utils/animationProps";

export const SidebarDesktop: React.FC<any> = ({
  closeStream,
  exitPopup,
  isMuted,
  isControl,
  height,
  handleMuteClick,
  handleControlClick,
  isMobile,
  userArr
}) => {
  const [open, setOpen] = useState(false);
  const [popup, setPopup] = useState({
    popup1: false,
    popup2: false,
  });

  useEffect(() => {
    console.log("test");
  }, [exitPopup]);

  const isAdmin = false;

  const [wideSidebar, setWideSidebar] = useState(false);

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

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

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

  function closeSideBar() {
    setOpen(false);
    setWideSidebar(false);
  }

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

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

  const setAnimation = () => {
    if (isAdmin) return wideSidebarAdminVariants;
    else {
      return wideSidebarVariants;
    }
  };

  return (
    <>
      <motion.div
        onHoverEnd={() => closeSideBar()}
        initial={false}
        animate={open ? "open" : "closed"}
        variants={wideSidebar ? setAnimation() : sidebarVariants}
        className="toolbar-container"
        style={{ height: height }}

      >
        <div
          style={wideSidebar ? { overflow: "hidden" } : { overflow: "visible" }}
          className="toolbar-field"
        >
          <div className="toolbar-field-part">
            <FullscreenButton isSidebarWide={wideSidebar}> </FullscreenButton>
            <div className="toolbar-button-container-border-line"></div>
            <UserList
              userArr={userArr}
              isMobile={isMobile}
              closeSidebar={closeSideBar}
              isSidebarWide={wideSidebar} /// this is for disable showhing button's caption
              isAdmin={isAdmin}
            ></UserList>
          </div>
          <motion.div
            onHoverStart={() => setWideSidebar(true)}
            className="toolbar-field-part"
          >
            <WideSidebarButton
              isSidebarWide={wideSidebar}
              close={closeSideBar}
            ></WideSidebarButton>
          </motion.div>
          <ControlPanel
            isControl={isControl}
            handleControlClick={handleControlClick}
            isSidebarWide={wideSidebar}
            isMuted={isMuted}
            handleMuteClick={handleMuteClick}
            handleOpenSharePopup={handleOpenSharePopup}
            handleOpenExitPopup={handleOpenExitPopup}
          ></ControlPanel>
        </div>
        <AnimatePresence>
          {!open && (
            <motion.div
              variants={popupAnimation}
              initial={"hidden"}
              animate={"show"}
              exit={"hidden"}
              onClick={() => setOpen(true)}
              className="toolbar-open-button"
            >
              <span className="toolbar-open-button-icon"></span>
            </motion.div>
          )}
        </AnimatePresence>
      </motion.div>
      <AnimatePresence>
        {popup.popup1 && (
          <motion.div
            key={1}
            variants={popupAnimation}
            initial={"hidden"}
            animate={"show"}
            exit={"hidden"}
          >
            <PopupShare setClose={handleClosePopups}></PopupShare>
          </motion.div>
        )}

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