/* eslint-disable @typescript-eslint/ban-ts-comment */
import React, { useEffect } from 'react';
import { SafeScreen, Visible } from 'components';
import { Row } from 'components/layout';
import { useResponsiveLayout, useSettings } from 'hooks';
import { TopBar } from 'components/dashboard/top-bar';
import { Rooms } from 'screens/rooms';
import { Chat } from 'screens/chat';
import { FullScreen, PopUp } from 'components/calling';
import { isChatPopUpOpenVar, isRoomPageVar } from 'state-management/settings';
import { useReactiveVar } from '@apollo/client';
import { Search, Navigator } from 'components/top-bar';

export const Room: React.FC = () => {
  const { isTabletMD, isTabletSM, isMobile } = useResponsiveLayout();
  const isChatPopUpOpen = useReactiveVar(isChatPopUpOpenVar);
  const { setIsSideBarCollapsed, isOnCall } = useSettings();

  const isSmall = isMobile || isTabletMD || isTabletSM;

  useEffect(() => {
    isRoomPageVar(true);
    setIsSideBarCollapsed(true);
  }, [setIsSideBarCollapsed]);

  return (
    <SafeScreen edges={['top', 'bottom']}>
      <TopBar isStatusBarIncluded leftElement={<Navigator />} rightElement={<Search />} />
      <Visible if={isChatPopUpOpen}>
        <PopUp />
      </Visible>
      <Row>
        <Visible if={!isSmall}>
          <Rooms isPopUp={false} />
        </Visible>
        <Visible if={isOnCall}>
          <FullScreen isPopUp={false} variant="full" />
        </Visible>
        {/* @ts-ignore */}
        <Chat isPopUp={false} />
      </Row>
    </SafeScreen>
  );
};