import { FC } from 'react';
import { Container } from 'components/layout';
import { useResponsiveLayout } from 'hooks';
import { ResizeMode, Video } from 'expo-av';
import { metrics } from 'config';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { Action } from 'components/calling/action';
import { Floating } from '../floating';
const { STYLES } = metrics;

export const Direct: FC<ParticipantsProps> = ({ participants }) => {
  const { width, height } = useResponsiveLayout();
  const topAvoid = STYLES.topBarHeight * 2;
  const onScreenHeight = height - topAvoid;
  const { bottom } = useSafeAreaInsets();
  const marginBottom = bottom + 10;
  return (
    <Container width={width} height={onScreenHeight}>
      <Floating participant={participants[0]} />
      <Action
        position="absolute"
        zIndex={2}
        left={0}
        right={0}
        bottom={marginBottom}
        backgroundColor="transparent"
        py="2xs"
        alignItems="center"
        justifyContent="center"
      />

      <Video
        style={{
          width: width,
          height: onScreenHeight,
        }}
        resizeMode={ResizeMode.COVER}
        source={{ uri: 'http://d23dyxeqlo5psv.cloudfront.net/big_buck_bunny.mp4' }}
      />
    </Container>
  );
};

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

interface ParticipantsProps {
  participants: ParticipantType[];
}