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';
const { STYLES } = metrics;

export const Direct: FC<ParticipantsProps> = ({ participants }) => {
  const { width, height, isMobile } = useResponsiveLayout();
  const leftAvoid = isMobile ? 0 : STYLES.sideBarCollapseWidth;
  const topAvoid = STYLES.topBarHeight * 2;
  const perItemHeight = (height - topAvoid) / (participants.length - 1);
  const perItemWidth = (width - leftAvoid) / participants.length;
  return (
    <Container>
      <Row style={{ flexDirection: 'row' }}>
        {participants.map(() => (
          <Container 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>
        ))}
      </Row>
    </Container>
  );
};

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

interface ParticipantsProps {
  participants: ParticipantType[];
}