import { FC } from 'react';
import { Container, StyleSystemThemedProps } from 'components/layout';
import { metrics } from 'config';
import { useResponsiveLayout } from 'hooks';
import { TopBar } from '../top-bar';
import { Participants } from '../participants';

const { STYLES } = metrics;

export const FullScreen: FC<FullScreenType> = ({ isPopUp, variant }) => {
  const { isMobile } = useResponsiveLayout();
  const top = STYLES.topBarHeight;
  const leftSidedWidth = STYLES.sideBarWidth + STYLES.sideBarCollapseWidth;

  const isLeftSided = variant === 'left-sided' ? leftSidedWidth : leftSidedWidth;
  const isFull = variant === 'full' ? STYLES.sideBarCollapseWidth : isLeftSided;
  const left = isMobile ? 0 : isFull;

  const rightElse = variant === 'sided-center' ? STYLES.rightPopUpWidth : 0;
  const right = isMobile ? 0 : rightElse;
  return (
    <Container
      backgroundColor="primary"
      position="absolute"
      zIndex={1}
      left={left}
      right={right}
      top={top}
      bottom={0}
    >
      <Container height={STYLES.topBarHeight}>
        <TopBar isPopUp={false} />
      </Container>
      <Participants
        isPopUp={isPopUp}
        participants={[
          {
            id: '123',
            uri: 'https://avatars.githubusercontent.com/u/98377997',
            username: 'Muhammad Sarmad',
          },
          {
            id: '1234',
            uri: 'https://avatars.githubusercontent.com/u/98377997',
            username: 'Ahmad Ali',
          },
        ]}
      />
    </Container>
  );
};

export type FullScreenType = StyleSystemThemedProps & FullScreenProps;
interface FullScreenProps {
  isPopUp: boolean;
  /**
   * Full represent full screen and show top-bar and sidebar-collapsed
   * Left-Sided represent full screen with top-bar sidebar collapsed and rooms open/collapsed sidebar
   * Sided Center show call in center and show left sidebar and show chat at right
   */
  variant?: 'full' | 'left-sided' | 'sided-center';
}