import { useState } from 'react';
import {
  Box,
  Button,
  Typography,
  Link,
  Dialog,
  DialogTitle,
  DialogContent,
  IconButton,
} from '@mui/material';
import { useTranslation } from 'react-i18next';
import { type SubmitProps } from '../../types/settingForm';
import { CloseCircle } from 'iconsax-react';
import { Icon } from '@rkheftan/harmony-ui';

export function SubmitSection({ loading }: SubmitProps) {
  const { t, i18n } = useTranslation('completionForm');
  const [openDialog, setOpenDialog] = useState(false);

  const handleOpenDialog = (e: React.MouseEvent) => {
    e.preventDefault();
    setOpenDialog(true);
  };

  const agreementText = t('completion.agreement');

  return (
    <>
      <Box
        sx={{
          display: 'flex',
          flexWrap: 'wrap',
          gap: 2,
          mb: 2,
          justifyContent: 'flex-start',
        }}
      >
        <Typography
          variant="body2"
          sx={{
            flex: '1 1 260px',
            maxWidth: 'calc(100% - 263px)',
            minWidth: '260px',
          }}
          color="text.primary"
        >
          {t('completion.agreementPart1')}
          <Link href="#" onClick={handleOpenDialog}>
            {t('completion.agreementLinkText')}
          </Link>
          {t('completion.agreementPart2')}
        </Typography>

        <Button
          variant="contained"
          type="submit"
          disabled={loading}
          form="completionForm"
          sx={{
            width: { xs: '100%', sm: '247px' },
            alignSelf: { xs: 'stretch', sm: 'center' },
            textTransform: 'none',
          }}
        >
          {loading
            ? t('completion.submitting')
            : t('completion.registerButton')}
        </Button>
      </Box>

      <Dialog
        open={openDialog}
        onClose={() => setOpenDialog(false)}
        fullWidth
        maxWidth="md"
        dir={i18n.language.startsWith('fa') ? 'rtl' : 'ltr'}
      >
        <DialogTitle
          sx={{
            display: 'flex',
            alignItems: 'center',
            gap: 1,
          }}
        >
          <IconButton onClick={() => setOpenDialog(false)}>
            <Icon Component={CloseCircle} size="medium" color="primary.main" />
          </IconButton>
          {t('completion.rules') || t('completion.rules')}
        </DialogTitle>

        <DialogContent
          dividers
          sx={{ whiteSpace: 'pre-line', fontSize: '14px' }}
        >
          {agreementText}
        </DialogContent>
      </Dialog>
    </>
  );
}
