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 VroomUILayout02 (props: VroomUILayout01Props): JSX.Element {
  return (
    <div style={{
      margin: '0 auto',
      padding: '20px',
      display: 'flex',
      flexWrap: 'wrap',
      justifyContent: 'space-between'
    }}>
      <div style={{
        width: '25%',
        display: 'flex',
        flexWrap: 'wrap',
        flexDirection: 'column',
        paddingRight: '10px'
      }}>
        {
          props.participantsState.length > 0
            ? props.participantsState.filter((i:any) => !!i.id).map((p: any) => {
              return (
                <div key={`${p.id}_${p.displayName}`} >
                  <ParticipantPlayer participant={p} participantsState={props.participantsState} />
                  <ParticipantAudio participant={p} participantsState={props.participantsState} />
                </div>
              )
            })
            : <></>
        }
        {
          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 style={{
        width: '75%',
        position: 'relative',
        paddingRight: '10px'
      }}>
        {
          props.sdkState?.pub?.stream
            ? (
              <VideoPlayer
                addstyle={{
                  position: 'absolute',
                  top: '0',
                  left: '0',
                  width: '100%',
                  height: '100%',
                  objectFit: 'cover'
                }}
                cssclass="cover"
                srcobject={props.sdkState.pub.stream}
              />
            )
            : <></>
        }
      </div>
    </div>
  )
}