import { FC, useCallback } from 'react';
import { Visible, Card, UnderLay } from 'components';
import { isDirectRoomActionOpenVar } from 'state-management/dialogs';
import { directRoomActionPositionVar } from 'state-management/chat';
import { useReactiveVar } from '@apollo/client';
import { DirectRoomAction as DirectRoomActionRoot } from 'components/sheets/direct-room-action';
import { metrics } from 'config';
const {
  STYLES: { headerHeight },
} = metrics;
export const DirectRoomAction: FC = () => {
  const isDirectRoomActionOpen = useReactiveVar(isDirectRoomActionOpenVar);
  const dialogPosition = useReactiveVar(directRoomActionPositionVar);

  const closeDialog = useCallback(() => {
    isDirectRoomActionOpenVar(false);
  }, []);

  const top = Number(dialogPosition.top) + headerHeight;
  const left = dialogPosition.x + 60;

  return (
    <Visible if={isDirectRoomActionOpen}>
      <UnderLay
        isTransparent={true}
        alignItems="center"
        justifyContent="center"
        isActive={isDirectRoomActionOpen}
        setIsActive={closeDialog}
      >
        <Card
          position="absolute"
          top={top}
          left={left}
          right={'m'}
          variant="plain"
          overflow="hidden"
          colorVariant="base"
          width={300}
          height={188}
        >
          <DirectRoomActionRoot isSheetOpen={isDirectRoomActionOpen} />
        </Card>
      </UnderLay>
    </Visible>
  );
};