import { FC } from 'react';
import { Container, Row } from 'components/layout';
import { useResponsiveLayout } from 'hooks';
import { ResizeMode, Video } from 'expo-av';
import { metrics } from 'config';
import { Text } from 'components/text';
import { ChatFill, Mic, Smiling } from 'icons';
import { Fab } from 'components/fab';
import { Visible } from 'components/visible';
import { Direct } from './direct';
const { STYLES } = metrics;

export const Participants: FC<ParticipantsProps> = ({ isPopUp, participants }) => {
  const { width, height, isMobile } = useResponsiveLayout();
  const leftAvoid = isMobile ? 0 : STYLES.sideBarCollapseWidth;
  const topAvoid = STYLES.topBarHeight * 2;
  const perItemHeight = isPopUp ? 300 : (height - topAvoid) / (participants.length - 1);
  const perItemWidth = isPopUp ? 200 : (width - leftAvoid) / participants.length;
  const isDirect = participants.length == 2;

  return (
    <Container>
      <Visible if={isDirect}>
        <Direct participants={participants} />
      </Visible>
      <Visible if={!isDirect}>
        <Container style={{ flexDirection: 'row' }}>
          {participants.map((participant) => (
            <Container key={participant.id} width={perItemWidth} height={perItemHeight}>
              <Row
                position="absolute"
                justifyContent="space-between"
                bottom={20}
                left={30}
                right={30}
                zIndex={1}
              >
                <Row>
                  <Row alignItems="center">
                    <Text mr="xs" variant="title" color="white">
                      Sara
                    </Text>
                    <Mic height={18} width={18} colorVariant="white" />
                  </Row>
                </Row>
                <Row>
                  <Fab
                    variant="plain"
                    sizeVariant="large"
                    colorVariant="base"
                    centerElement={<Smiling colorVariant="white" height={18} width={18} />}
                  />
                  <Fab
                    ml="xs"
                    variant="plain"
                    sizeVariant="large"
                    colorVariant="base"
                    centerElement={<ChatFill height={18} width={18} />}
                  />
                </Row>
              </Row>
              <Video
                style={{
                  width: perItemWidth,
                  height: perItemHeight,
                }}
                resizeMode={ResizeMode.COVER}
                source={{ uri: 'http://d23dyxeqlo5psv.cloudfront.net/big_buck_bunny.mp4' }}
                posterSource={undefined}
                posterStyle={{ backgroundColor: 'red', width: 300, height: 300 }}
              />
            </Container>
          ))}
        </Container>
      </Visible>
    </Container>
  );
};

type ParticipantType = {
  id: string;
  uri: string;
  username: string;
};

interface ParticipantsProps {
  isPopUp: boolean;
  participants: ParticipantType[];
}