import React, { ReactNode, useEffect, useRef } from 'react';
import { Box, IconButton, Text } from '@nova-hf/ui';
import gsap from 'gsap';
import { inject } from 'mobx-react';

import UI from '../../store/ui';

type MobileDrawerProps = {
  isActive: boolean;
  title: string;
  children: ReactNode;
  onClose: () => void;
  ui?: UI;
};

const Drawer = ({ isActive, title, ui, children, onClose }: MobileDrawerProps) => {
  const drawerRef = useRef(null);

  useEffect(() => {
    if (isActive) {
      ui?.setShowContactBubble(false);
      gsap.to(drawerRef.current, { y: 0, duration: 0.5, ease: 'power3.out' });
    } else {
      gsap.to(drawerRef.current, { y: '100%', duration: 0.5, ease: 'power3.in' });
    }
  }, [isActive]);

  return (
    <Box
      ref={drawerRef}
      position="fixed"
      bottom={0}
      left={0}
      right={0}
      backgroundColor="black100"
      boxShadow="normal"
      style={{ borderTopLeftRadius: 16, borderTopRightRadius: 16, transform: 'translateY(100%)' }}
      padding={4}
      zIndex="customermenu"
    >
      <Box display="flex" flexDirection="column" gap={2}>
        <Box
          display="flex"
          flexDirection="row"
          alignItems={'flex-start'}
          justifyContent="space-between"
        >
          <Text color="white" variant="h6" marginBottom={2}>
            {title}
          </Text>
          <Box marginTop={-2} marginRight={-2}>
            <IconButton
              color={'grey800'}
              icon="close"
              hiddenButtonText="close"
              onClick={() => onClose()}
              hasBackgroundFilled
              size={16}
            />
          </Box>
        </Box>
        {children}
      </Box>
    </Box>
  );
};

export default inject('ui')(Drawer);