import "./Sidebar.css";
import React, { useEffect, useState } from "react";
import { useHistory } from "react-router";


import { SidebarDesktop } from "../SidebarDesktop/SidebarDesktop";
import { SidebarMobile } from "../SidebarMobile/SidebarMobile";

import { closeStream } from "utils/app";
import { useAppSelector } from "hooks/redux";

export const Sidebar: React.FC<any> = ({ exitPopup, isMobile, heightDevice, players }) => {
  const [isMuted, setMuted] = useState(true);
  const [isControl, setControl] = useState(false);
  const history = useHistory()

  const { playerCount } = useAppSelector((state) => state.sessionReducer);






  const handleCloseStream = () => {
    closeStream()
    history.push('/')
  }

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

  const handleControlClick = () => {
    setControl((prev) => !prev);
  };

  return (
    <>
      {isMobile ? (
        <SidebarMobile
          userArr={playerCount}
          isMobile={isMobile}
          height={heightDevice}
          isMuted={isMuted}
          isControl={isControl}
          handleMuteClick={handleMuteClick}
          handleControlClick={handleControlClick}
          closeStream={handleCloseStream}
        ></SidebarMobile>
      ) : (
        <SidebarDesktop
          userArr={playerCount}

          height={heightDevice}
          isMobile={isMobile}
          isMuted={isMuted}
          isControl={isControl}
          handleMuteClick={handleMuteClick}
          handleControlClick={handleControlClick}
          closeStream={handleCloseStream}
          exitPopup={exitPopup}
        ></SidebarDesktop>
      )}
    </>
  );
};