import React from 'react'
import {VideoPlayer} from "../player/VideoPlayer";
import {ParticipantPlayer} from "../player/ParticipantPlayer";
import {ParticipantAudio} from "../player/ParticipantAudio";
import {Attendees} from "../player/Attendees";

export interface VroomUILayout01Props {
  localDisplayName: string,
  participantsState: any,
  sdkState: any,
  attendees: any
}

export default function VroomUILayout03 (props: VroomUILayout01Props): JSX.Element {
  return (
    <div style={{
      margin: '0 auto',
      display: 'flex',
      flexDirection: 'column',
      alignItems: 'center',
      paddingLeft: '20px',
      paddingRight: '20px',
    }}>
      <div>
        {
          props.sdkState?.pub?.stream
            ? (
              <VideoPlayer
                addstyle={{
                  width: '100%'
                }}
                cssclass="cover"
                srcobject={props.sdkState.pub.stream}
              />
            )
            : <></>
        }
      </div>
      <div style={{
        margin: '0 auto',
        width: '100%',
        paddingTop: '10px',
        display: 'flex',
        flexWrap: 'wrap',
        flexDirection: 'row'
      }}>
        {
          props.participantsState.length > 0
            ? props.participantsState.filter((i:any) => !!i.id).map((p: any) => (
              <ParticipantPlayer
                key={`${p.id}_${p.displayName}_video`}
                participant={p}
                participantsState={props.participantsState}
              />
            ))
            : <></>
        }
        {
          props.participantsState.length > 0
            ? props.participantsState.filter((i:any) => !!i.id).map((p: any) => (
              <ParticipantAudio
                key={`${p.id}_${p.displayName}`}
                participant={p}
                participantsState={props.participantsState}
              />
            ))
            : <></>
        }
        {
          props.attendees?.length > 0
            ? props.attendees
              .filter((i: any) => !!i.id)
              .map((p: any) => (
                <Attendees
                  key={`${p.id}_${p.display}`}
                  attendee={p}
                  participantsState={props.participantsState}
                />
              ))
            : <></>
        }
      </div>
    </div>
  )
}