import { FC, useCallback } from 'react';
import { Visible, Card, UnderLay } from 'components';
import { isProfileActionOpenVar } from 'state-management/dialogs';
import { ProfileAction as ProfileActionRoot } from 'components/sheets';
import { useReactiveVar } from '@apollo/client';
import { useSettings } from 'hooks';

export const ProfileAction: FC = () => {
  const isProfileActionOpen = useReactiveVar(isProfileActionOpenVar);
  const { isSideBarCollapsed } = useSettings();

  const closeDialog = useCallback(() => {
    isProfileActionOpenVar(false);
  }, []);
  const left = isSideBarCollapsed ? 65 : 'xs';
  return (
    <Visible if={isProfileActionOpen}>
      <UnderLay
        isTransparent={true}
        alignItems="center"
        justifyContent="center"
        isActive={isProfileActionOpen}
        setIsActive={closeDialog}
      >
        <Card
          position="absolute"
          top={50}
          left={left}
          right={'m'}
          variant="plain"
          overflow="hidden"
          width={236}
        >
          <ProfileActionRoot isSheetOpen={isProfileActionOpen} />
        </Card>
      </UnderLay>
    </Visible>
  );
};