import {
  Flex,
  Modal,
  ModalBody,
  ModalContent,
  ModalFooter,
  ModalOverlay,
  Text,
} from '@chakra-ui/react';
import { observer } from 'mobx-react-lite';
import React from 'react';

import { useStores } from '@/app/(root)/AppProviders';

import Button, { ButtonVariant } from '../button/Button';
import CloseButton from '../button/CloseButton';
import SpinnerSVG from '../svg/SpinnerSVG';

const CustomModeTOSModal: React.FC<{
  isOpen: boolean;
  onClose: () => void;
  onConfirm: () => void;
  isLoading: boolean;
}> = observer(({ isOpen, onClose, onConfirm, isLoading }) => {
  const { session } = useStores();

  return (
    <Modal isOpen={isOpen} onClose={onClose} isCentered size='xl'>
      <ModalOverlay />
      <ModalContent
        sx={{ bgColor: 'var(--color-background-primary)' }}
        color='var(--color-foreground-primary)'
        borderRadius='32px'
        position='relative'
      >
        <Flex justifyContent='space-between' alignItems='center' px={3}>
          <span className='py-8 pl-4 font-serif text-2xl'>
            Please accept our terms to make a song with custom lyrics
          </span>
          {session.roles.has_accepted_custom_mode_tos && (
            <Flex mt={-14}>
              <CloseButton onClick={onClose} />
            </Flex>
          )}
        </Flex>
        <ModalBody>
          <Flex alignItems='center' mb={2}>
            <Text fontSize='14px' fontFamily={'Neue Montreal'}>
              Suno is designed for creating original music. Please confirm you
              will only submit AI-generated lyrics, original lyrics or lyrics to
              which you otherwise hold rights to continue.
            </Text>
          </Flex>
        </ModalBody>
        <ModalFooter>
          <Button
            variant={ButtonVariant.Primary}
            onClick={onConfirm}
            icon={isLoading && <SpinnerSVG />}
          >
            I Accept
          </Button>
        </ModalFooter>
      </ModalContent>
    </Modal>
  );
});

export default CustomModeTOSModal;