// eslint-disable-next-line @suno-custom/no-chakra-ui
import { Modal, ModalBody, ModalContent, ModalOverlay } from '@chakra-ui/react';
import { observer } from 'mobx-react-lite';

import CloseButton from '@/components/button/CloseButton';
import PersonaDropdown from '@/components/section/PersonaDropdown';
import { useContextSelector } from '@/hooks/useContextSelector';
import useDeviceAttributes from '@/hooks/useDeviceAttributes';
import { Persona } from '@/state/personaStore';
import { colorVar } from '@/utils/utils';

import CreateFormContext from '../../v2/CreateFormContext';

export const PersonasModal = observer(
  ({ isOpen, onClose }: { isOpen: boolean; onClose: () => void }) => {
    const { isMobile } = useDeviceAttributes();
    const addPersona = useContextSelector(
      CreateFormContext,
      (context) => context.addPersona
    );
    const setActiveModal = useContextSelector(
      CreateFormContext,
      (context) => context.setActiveModal
    );

    const handleClose = () => {
      setActiveModal(null);
      onClose();
    };

    return (
      <Modal
        isOpen={isOpen}
        onClose={handleClose}
        size={'lg'}
        motionPreset={isMobile ? 'slideInBottom' : 'scale'}
      >
        <ModalOverlay bg='blackAlpha.600' />
        <ModalContent
          bg={colorVar('background/secondary')}
          color={colorVar('foreground/primary')}
          marginTop={isMobile ? 'auto' : 'auto'}
          marginBottom={isMobile ? 0 : 'auto'}
          borderRadius={isMobile ? '32px 32px 0 0' : '32px'}
          maxH={isMobile ? '70vh' : '600px'}
          h={isMobile ? 'auto' : undefined}
          overflow='hidden'
        >
          <div className='absolute top-4 right-4 z-[9999]'>
            <CloseButton onClick={handleClose} className='rounded-full' />
          </div>
          <ModalBody p={0} overflow='hidden'>
            <PersonaDropdown
              key={isOpen ? 'open' : 'closed'}
              showHeader={false}
              onModalClose={() => {}}
              onModalOpen={() => {}}
              onSelect={async (persona: Persona) => {
                addPersona(persona);
                setActiveModal(null);
              }}
            />
          </ModalBody>
        </ModalContent>
      </Modal>
    );
  }
);