import React from 'react';
import styled from '@emotion/styled';

type videoSessionType = {
  videoSession?: any;
  expanded?: boolean;
};

export const ModalWrapper = styled.div<videoSessionType>`
  position: absolute;
  ${(props) => !props.videoSession && 'visibility:hidden;'}
  ${(props) => {
    return props.expanded ? 'width:100%;' : 'width: 322px;';
  }}

  height: 100vh;
  display: flex;
  right: 0px;
  justify-content: center;
  background: black;
  z-index: 2000;
  top: 0;

  .expand-viewer {
    position: absolute;
    top: 10px;
    color: white;
    width: 20px;
    height: 20px;
    right: 11px;
    z-index: 20;
  }
`;

const CallStatus = styled.div`
  .call-buttons {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    button {
      border-radius: 50%;
      width: 50px;
      height: 50px;
      margin-right: 4px;

      border: 1px solid #ccc;
      background: white;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
`;

const CallInitiator = styled.div`
  .call-buttons {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    button {
      border-radius: 50%;
      width: 50px;
      height: 50px;
      margin-right: 4px;

      border: 1px solid #ccc;
      background: white;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
`;

const CallButtons = styled.div`
  //position: absolute;
  //bottom: 0;
`;

const LocalVideo = styled.div`
  video {
    height: 127px;
    width: 169px;
    max-width: none;
  }
`;

type RtcViewWrapperType = {
  videoSession?: any;
  expand?: boolean;
  setExpand: (value: boolean) => void;
};

export default function RtcViewWrapper({
  videoSession,
  expand,
  setExpand,
}: RtcViewWrapperType) {
  return (
    <React.Fragment>
      <CallStatus id="callStatus" />

      <div
        className="flex"
        style={{ visibility: `${!videoSession ? 'hidden' : 'visible'}` }}
      >
        {/* <div id="callButton">call</div>
        <div id="info">info</div> */}

        <div
          id="call-wrapper"
          className="flex"
          style={{ visibility: `${!videoSession ? 'hidden' : 'visible'}` }}
        >
          <div className="flex justify-between w-full items-center lg:space-x-10 space-x-2">
            <CallButtons id="callButtons" className="space-x-4" />

            <LocalVideo
              id="localVideo"
              className="bg-black overflow-hidden lg:h-32 lg:w-32 h-20 w-20 rounded-full border-2 border-green-600"
            />

            <div
              id="remoteVideo"
              className="bg-black overflow-hidden
              h-32 w-32
              rounded-full border-2
              border-green-600"
            />

            <CallInitiator
              id="callInitiator"
              className="flex flex-col justify-center items-center space-y-5"
            />

            <div id="status-information" className="hidden lg:block">
              <div id="info"></div>
            </div>
          </div>

          <div id="status-information" className="block lg:hidden">
            <div id="info"></div>
          </div>

          <div className="justify-end hidden">
            {setExpand && (
              <button
                className="expand-viewer"
                onClick={() => setExpand(!expand)}
              >
                {!expand ? <FullScreenIcon /> : <FullScreenExitIcon />}
              </button>
            )}
          </div>
        </div>
      </div>
    </React.Fragment>
  );
}

const BaseIcon = styled.svg`
  height: 30px;
  width: 30px;
`;

export function FullScreenIcon(props) {
  return (
    <BaseIcon
      {...props}
      fill="currentColor"
      viewBox="0 0 24 24"
      aria-hidden="true"
      tabindex="-1"
      title="Fullscreen"
    >
      <path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"></path>
    </BaseIcon>
  );
}

export function FullScreenExitIcon(props) {
  return (
    <BaseIcon
      {...props}
      fill="currentColor"
      viewBox="0 0 24 24"
      aria-hidden="true"
      tabindex="-1"
      title="FullscreenExit"
    >
      <path d="M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z"></path>
    </BaseIcon>
  );
}
