import { useCallback } from 'react';
import { Container, ScrollView } from 'components/layout';
import { metrics } from 'config';
import { TopSheet } from 'components';
import { useResponsiveLayout } from 'hooks';
import { Card } from 'components/card';
import { Visible } from 'components/visible';
import { Content } from './content';

const { STYLES } = metrics;
const sheetHeight = 220;

export const DirectRoomAction: React.FC<DirectRoomActionProps> = ({
  isSheetOpen = false,
  setIsSheetOpen,
}) => {
  const { isMobile } = useResponsiveLayout();

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

  return (
    <>
      {!isMobile ? (
        <Visible if={isSheetOpen}>
          <Card colorVariant="base-01" variant="float" overflow="hidden" p="xs">
            <Content />
          </Card>
        </Visible>
      ) : (
        <TopSheet isSheetOpen={isSheetOpen} top={0} height={sheetHeight} closeSheet={closeSheet}>
          <Container borderRadius={STYLES.radius.card} backgroundColor="base" mt="xs" flexGrow={1}>
            <ScrollView px="xs" overflow="hidden">
              <Content />
            </ScrollView>
          </Container>
        </TopSheet>
      )}
    </>
  );
};

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