import {
  Menu,
  MenuItem,
  MenuList,
  Modal,
  ModalBody,
  ModalContent,
  ModalOverlay,
} from '@chakra-ui/react';
import { observer } from 'mobx-react-lite';
import React from 'react';
import { useTranslation } from 'react-i18next';

import { mobileActionsGlassmorphicEffect } from '@/utils/constants';

import CloseButton from '../button/CloseButton';

interface MobileRootMenuItemProps {
  href?: string;
  onClose: () => void;
  children: React.ReactNode;
  fontSize: string;
  color: string;
  link?: boolean;
}

export const MobileRootMenuItem: React.FC<MobileRootMenuItemProps> = ({
  href,
  onClose,
  children,
  fontSize,
  color,
}) => {
  const menuItemProps = {
    bg: 'transparent',
    _hover: {
      bg: 'rgba(255, 255, 255, 0.1)',
    },
    transition: 'background-color 0.3s ease',
    borderRadius: '6px',
    outline: 'none',
    fontSize,
    href,
    onClick: onClose,
    display: 'flex',
    width: '100%',
    height: 'auto',
    padding: '10px 20px',
    justifyContent: 'flex-start',
    color,
    fontFamily: 'Editorial New',
  };

  return (
    <MenuItem as={href ? 'a' : 'button'} {...menuItemProps}>
      {children}
    </MenuItem>
  );
};

interface MobileRootMenuComponentProps {
  isOpen: boolean;
  onClose: () => void;
}

const MobileRootMenu: React.FC<MobileRootMenuComponentProps> = observer(
  ({ isOpen, onClose }: { isOpen: boolean; onClose: () => void }) => {
    const { t } = useTranslation();

    return (
      <Menu isOpen={isOpen} onClose={onClose}>
        <Modal isOpen={isOpen} onClose={onClose} size='full' isCentered>
          <ModalOverlay sx={{ ...mobileActionsGlassmorphicEffect }} />
          <ModalContent sx={{ ...mobileActionsGlassmorphicEffect }}>
            <CloseButton onClick={onClose} />
            <ModalBody sx={{ ...mobileActionsGlassmorphicEffect }} mt={4}>
              <MenuList
                border='none'
                boxShadow='none'
                bg='transparent'
                display='flex'
                flexDirection='column'
                width='100%'
                height='100%'
                mt={10}
              >
                <div className='flex flex-1 flex-col'>
                  <MobileRootMenuItem
                    href='https://help.suno.com'
                    onClose={onClose}
                    fontSize='18px'
                    color='white'
                  >
                    {t('nav.help')}
                  </MobileRootMenuItem>

                  <MobileRootMenuItem
                    href='https://suno.com/about'
                    onClose={onClose}
                    fontSize='18px'
                    color='white'
                  >
                    {t('nav.about')}
                  </MobileRootMenuItem>
                  <MobileRootMenuItem
                    href='https://suno.com/blog'
                    onClose={onClose}
                    fontSize='18px'
                    color='white'
                  >
                    {t('nav.blog')}
                  </MobileRootMenuItem>
                  <MobileRootMenuItem
                    href='https://jobs.ashbyhq.com/suno'
                    onClose={onClose}
                    fontSize='18px'
                    color='white'
                  >
                    {t('nav.careers')}
                  </MobileRootMenuItem>
                  <MobileRootMenuItem
                    href='https://suno.com/terms'
                    onClose={onClose}
                    fontSize='18px'
                    color='white'
                  >
                    {t('nav.terms')}
                  </MobileRootMenuItem>
                  <MobileRootMenuItem
                    href='https://suno.com/privacy'
                    onClose={onClose}
                    fontSize='10px'
                    color='white'
                  >
                    {t('nav.privacy')}
                  </MobileRootMenuItem>
                </div>
              </MenuList>
            </ModalBody>
          </ModalContent>
        </Modal>
      </Menu>
    );
  }
);

export default MobileRootMenu;