import { useCallback } from 'react';
import { Container } from 'components/layout';
import { metrics } from 'config';
import { BottomSheet } from 'components/bottom-sheet';
import { useResponsiveLayout } from 'hooks';
import { Card } from 'components/card';
import { Visible } from 'components/visible';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { Content } from './content';

const { STYLES, Z_INDEX } = metrics;

export const ProfileAction: React.FC<ProfileActionProps> = ({
  isSheetOpen = false,
  setIsSheetOpen,
}) => {
  const { bottom } = useSafeAreaInsets();
  const { isMobile } = useResponsiveLayout();

  const sheetHeight = 190 + bottom;

  const closeSheet = useCallback(() => {
    if (setIsSheetOpen) {
      setIsSheetOpen(false);
    }
  }, [setIsSheetOpen]);

  return (
    <>
      {!isMobile ? (
        <Visible if={isSheetOpen}>
          <Card colorVariant="base" zIndex={Z_INDEX.messageAction} variant="float-outline" py="xs">
            <Content closeSheet={closeSheet} />
          </Card>
        </Visible>
      ) : (
        <BottomSheet isSheetOpen={isSheetOpen} height={sheetHeight} closeSheet={closeSheet}>
          <Container py="xs" borderRadius={STYLES.radius.card} backgroundColor="base" flexGrow={1}>
            <Content closeSheet={closeSheet} />
          </Container>
        </BottomSheet>
      )}
    </>
  );
};

export interface ProfileActionProps {
  isSheetOpen?: boolean;
  isHovered?: boolean;
  setIsSheetOpen?: (value: boolean) => void;
}