import React from 'react'
import { VideoPlayer } from '../player/VideoPlayer'
import { ParticipantPlayer } from '../player/ParticipantPlayer'
import { ParticipantAudio } from '../player/ParticipantAudio'
import { useVroomUI } from '@/contexts/VroomUI'
import LayoutStyle from './styles/index.style'
import {useSdkStateGlobal} from '@/contexts/SdkStateGlobal'

export interface VroomUILayout04Props {
  localDisplayName: string,
  participantsState: any,
  sdkState: any,
  attendees: any,
  localStream: MediaStream | null
}

export default function VroomUILayout04(
  props: VroomUILayout04Props
): JSX.Element {
  const vroomUI = useVroomUI()
  const sdkStateGlobal = useSdkStateGlobal()

  return (
    <div style={LayoutStyle.layoutWrapperStyle()}>
      <div
        className="container"
        style={LayoutStyle.layoutContainerStyle({
          gridTemplateColumns: (props.participantsState?.length || 0),
          gridTemplateRows: (props.participantsState?.length || 0),
        })}
      >
        <div style={LayoutStyle.localStreamStyle()}>
          {props.localStream ? (
            <>
              <VideoPlayer
                addstyle={{
                  width: '100%'
                }}
                cssclass="cover"
                srcobject={props.localStream}
              />
              <p style={LayoutStyle.localStreamDisplayNameStyle()}>{vroomUI.config.displayName}</p>
            </>
          ) : (
            <div style={LayoutStyle.localStreamDisplayNameCenterStyle()}>
              {vroomUI.config.displayName}
            </div>
          )}
        </div>
        {sdkStateGlobal.participants?.length > 0 ? (
          sdkStateGlobal.participants
            .filter((i: any) => !!i.id)
            .map((p: any) => {
              return (
                <div key={`video_la4_${p.id}`} style={LayoutStyle.participantsStyle()}>
                  <ParticipantPlayer
                    participant={p}
                    participantsState={sdkStateGlobal.participants}
                  />
                  <p style={LayoutStyle.participantsDisplayNameStyle()}>{p.displayName || p.display}</p>
                </div>
              )
            })
        ) : (
          <></>
        )}
        {sdkStateGlobal.participants.length > 0 ? (
          sdkStateGlobal.participants
            .filter((i: any) => !!i.id)
            .map((p: any) => (
              <ParticipantAudio
                key={`audio_la4_${p.id}`}
                participant={p}
                participantsState={sdkStateGlobal.participants}
              />
            ))
        ) : (
          <></>
        )}
      </div>
    </div>
  );
}