import "./playerStyles.css";
import { useParams, useLocation } from "react-router-dom";
import React, { useEffect, useState } from "react";
import { Sidebar } from "../sidebar/sidebar";
import { useAppSelector } from "../../hooks/redux";
import { connectSession } from "../../store/reducers/ActionCreator";

type link = {
  id: string;
};

export const PlayerComponent: React.FC<any> = ({ closeStream, dispatch }) => {
  const { id } = useParams<link>();


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

  useEffect(() => {
    if (!data) {
      dispatch(connectSession(id));
    }
    console.log(data, 'data')
  }, []);



  return (
    <>
      {data && (
        <iframe
          title="stream"
          src={data.link}
          className={"player playerOn"}
        ></iframe>
      )}
      <Sidebar
        data={data}
        closeStream={closeStream}
      ></Sidebar>
    </>
  );
};