import "./playerStyles.css";
import { useParams } from "react-router-dom";
import { useWebRTC } from "../../hooks/useWebRTC";
import React, { useEffect, useState, useRef } from "react";
import { Sidebar } from "../sidebar/sidebar";
import { TPlayerComponent } from "../../utils/types";
const userLocal = {
  id: Math.floor(Math.random() * 100),
};
type link = {
  id: string;
};

export const PlayerComponent: React.FC<any> = ({
  data,
  closeStream,
  onConnectSession,
}) => {
  const { id } = useParams<link>();
  const {
    clients,
    provideRef,
    handleMute,
    handleControl,
    handleAdmin,
    sendRequset,
    message,
    warning,
    handleReturnControl,
  } = useWebRTC(id, userLocal);

  const [closeClick, setClose] = useState(false);

  useEffect(() => {
    onConnectSession(id)
  }, [])

  return (
    <>
      {true && (
        <iframe
          title="stream"
          src={data.link}
          className={"player playerOn"}
        ></iframe>
      )}
      <Sidebar
        close={closeClick}
        clients={clients}
        localUser={userLocal}
        provideRef={provideRef}
        handleMute={handleMute}
        handleAdmin={handleAdmin}
        sendRequset={sendRequset}
        handleControl={handleControl}
        message={message}
        data={data}
        closeStream={closeStream}
        handleReturnControl={handleReturnControl}
      ></Sidebar>
    </>
  );
};
