import React from "react";
import classnames from "classnames";

//strings
import strings from "../constants/localization";

//actions

//components
import Container from "../../../Talk-ui-kit/src/container";
import {Text} from "../../../Talk-ui-kit/src/typography";
import Gap from "../../../Talk-ui-kit/src/gap";
import {TbPlugConnectedX} from "react-icons/tb";

//styling
import style from "../../styles/app/CallBoxReconnecting.scss";

//statics

//functions


export default function ({participant, className, isVideo}) {
  if (!participant) {
    return null;
  }
  if (!participant.reconnecting && !participant.poorVideoConnection) {
    return null;
  }
  const classNames = classnames({
    [style.CallBoxReconnecting]: true,
    [className]: className
  });
  const poorVideoConnectionClassNames = classnames({
    [style.CallBoxReconnecting__PoorVideoConnection]: true,
    [style["CallBoxReconnecting__PoorVideoConnection--noConnection"]]: isVideo && participant.reconnecting
  })
  return <>
    {participant.reconnecting &&
    <Container className={classNames} display="flex" justifyContent="center" alignItems="center"
               title={`${strings.reconnecting}...`}>

      <Container className={style.CallBoxReconnecting__Blink}/>
      <Container className={style.CallBoxReconnecting__IconContainer} display="flex" justifyContent="center"
                 alignItems="center">
        <TbPlugConnectedX size={style.iconSizeSm}
                          color={style.colorWhite}/>
      </Container>
    </Container>
    }

    {isVideo &&
    <Container className={poorVideoConnectionClassNames} display="flex" justifyContent="center"
               alignItems="center">
      <Gap yt={participant.reconnecting ? 45 : 0}>
        <Text size="xs" invert
              dark>{participant.reconnecting ? strings.noVideoConnection : strings.poorVideoConnection}</Text>
      </Gap>
    </Container>
    }
  </>
}