import { useCallback } from 'react';
import { GestureResponderEvent } from 'react-native';
import { Fab } from 'components/fab';
import { Row, StyleSystemThemedProps } from 'components/layout';
import { CloseThick, Mic, SideBarClose, SideBarOpen, VideoCamera } from 'icons';
import { BackHeader } from 'components/back-header';
import { Visible } from 'components';
import { useResponsiveLayout, useSettings } from 'hooks';
import { useReactiveVar } from '@apollo/client';
import { isRoomsSideBarOpenVar } from 'state-management/settings';
import { RoomMember } from 'expo-schema';
import { User } from '../user';

export const Direct: React.FC<DirectType> = ({
  participant,
  isOpen,
  isPopUp,
  onPress,
  ...props
}) => {
  const { isChatPopUpOpen, setIsChatPopUpOpen, setIsSideBarCollapsed } = useSettings();
  const { isMobile } = useResponsiveLayout();
  const isRoomSideBarOpen = useReactiveVar(isRoomsSideBarOpenVar);
  const isSmall = isMobile || isPopUp;
  const backgroundColor = isPopUp ? 'base-01' : 'base';

  const openCloseSideBar = useCallback(() => {
    return (
      <>
        <Visible if={isRoomSideBarOpen}>
          <SideBarClose />
        </Visible>
        <Visible if={!isRoomSideBarOpen}>
          <SideBarOpen />
        </Visible>
      </>
    );
  }, [isRoomSideBarOpen]);
  const toggleSideBar = useCallback(() => {
    if (isRoomSideBarOpen) {
      setIsSideBarCollapsed(true);
    }
    isRoomsSideBarOpenVar(!isRoomSideBarOpen);
  }, [isRoomSideBarOpen, setIsSideBarCollapsed]);

  const closePopUp = useCallback(() => {
    setIsChatPopUpOpen(false);
  }, [setIsChatPopUpOpen]);

  return (
    <BackHeader
      isPopUp={isPopUp}
      backgroundColor={backgroundColor}
      isBack={true}
      borderRadius={10}
      leftElement={
        <Row alignItems="center">
          <Visible if={!isSmall}>
            <Fab
              mx="xs"
              onPress={toggleSideBar}
              variant="plain"
              colorVariant="base"
              shapeVariant="round"
              hoverColorVariant="base-02-hover"
              sizeVariant="medium"
              centerElement={openCloseSideBar()}
            />
          </Visible>
          <Visible if={!!participant}>
            <User
              isPopUp={isPopUp}
              isCaption={true}
              caption="Last seen 28 hours ago"
              user={{
                username: participant?.userName.first + ' ' + participant?.userName.last,
                profilePhoto: participant?.userProfilePhotoUrl as string,
              }}
              onPress={onPress}
            />
          </Visible>
        </Row>
      }
      rightElement={
        <>
          <Visible if={!isChatPopUpOpen}>
            <Row>
              <Fab
                onPress={() => {}}
                variant="plain"
                sizeVariant="medium"
                colorVariant="transparent"
                hoverColorVariant="base-02-hover"
                centerElement={<VideoCamera colorVariant="body" height={16} width={16} />}
              />

              <Fab
                onPress={() => {}}
                variant="plain"
                sizeVariant="medium"
                colorVariant="transparent"
                hoverColorVariant="base-02-hover"
                centerElement={<Mic colorVariant="body" height={16} width={16} />}
              />
            </Row>
          </Visible>
          <Visible if={isChatPopUpOpen}>
            <Fab
              onPress={closePopUp}
              variant="plain"
              sizeVariant="medium"
              colorVariant="transparent"
              centerElement={<CloseThick />}
            />
          </Visible>
        </>
      }
      {...props}
    />
  );
};

type DirectType = StyleSystemThemedProps & DirectProps;
export interface DirectProps {
  isOpen: boolean;
  participant: RoomMember;
  isPopUp: boolean;
  onPress: ((event: GestureResponderEvent) => void) | undefined;
}