import { FullscreenButton } from "../FullscreenButton/FullscreenButton";
import { AnimatePresence, motion } from "framer-motion";
import {
  sidebarVariants,
  popupAnimation,
  wideSidebarVariants,
  wideSidebarAdminVariants,
} from "utils/animationProps";
import { useState } from "react";
import { WideSidebarButton } from "../WideSidebarButton/WideSidebarButton";
import { UserButtonMobile } from "../UserButtonMobile/UserButtonMobile";
import { ControlButton } from "../ControlButton/ControlButton";
import { MicroButton } from "../MicroButton/MicroButton";
import { AdditionalButton } from "../AdditionalButton/AdditionalButton";
import { UserListMobile } from "../UserListMoblie/UserListMobile";

export const SidebarMobile: React.FC<any> = ({ height, isMobile }) => {
  const [open, setOpen] = useState(false);
  const [userList, setUserList] = useState(false);
  const [popupAdditional, setPopupAdditipnal] = useState(false);
  console.log(userList, 'popup')
  return (
    <>    <motion.div
      initial={false}
      animate={open ? "open" : "closed"}
      variants={sidebarVariants}
      style={{ height: height }}
      className="toolbar-container"
    >
      <div className="toolbar-field">
        <div className="toolbar-field-part">
          <FullscreenButton isSidebarWide={false}> </FullscreenButton>
          <WideSidebarButton close={() => setOpen(false)}></WideSidebarButton>
          <div className="toolbar-button-container-border-line"></div>
          <UserButtonMobile
            active={userList}
            onClick={() => setUserList(true)}
          ></UserButtonMobile>
        </div>
        <div className="toolbar-field-part">
          <ControlButton></ControlButton>
          <MicroButton></MicroButton>
          <div className="toolbar-button-container-border-line"></div>
          <AdditionalButton
            active={popupAdditional}
            onClick={() => setPopupAdditipnal(true)}
          ></AdditionalButton>
        </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>
      </div>
    </motion.div>
      <AnimatePresence>
        {userList && (<motion.div key={1}
          variants={popupAnimation}
          initial={"hidden"}
          animate={"show"}
          exit={"hidden"}
        >
          <UserListMobile closePopup={() => setUserList(false)} isMobile={isMobile}></UserListMobile>
        </motion.div>)}
      </AnimatePresence>
    </>

  );
};
