import {
  Dialog,
  DialogTitle,
  DialogContent,
  DialogActions,
  TextField,
  IconButton,
  Box,
  Button,
  Link,
  CircularProgress,
  InputAdornment,
} from '@mui/material';
import { CloseCircle, Eye, EyeSlash } from 'iconsax-react';
import { Icon } from '@rkheftan/harmony-ui';
import { type PasswordDialogProps } from '../../types/settingsType';
import { PasswordValidationItem } from './PasswordValidation';
import { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { useTranslation } from 'react-i18next';

export function PasswordDialog({
  open,
  fullScreen,
  handleClose,
  password,
  setPassword,
  confirmPassword,
  setConfirmPassword,
  currentPassword,
  setCurrentPassword,
  showValidation,
  matchPassword,
  loading,
  handleSubmit,
  changePassword,
  hasMinLength,
  hasNumber,
  hasUpperAndLower,
  hasSpecialChar,
}: PasswordDialogProps) {
  const { t } = useTranslation('setting');

  const [showCurrent, setShowCurrent] = useState(false);
  const [showNew, setShowNew] = useState(false);
  const [showConfirm, setShowConfirm] = useState(false);
  const navigate = useNavigate();

  const onFormSubmit: React.FormEventHandler<HTMLFormElement> = (e) => {
    e.preventDefault();
    e.stopPropagation();
    if (!loading) handleSubmit();
  };

  return (
    <Dialog
      open={open}
      onClose={handleClose}
      fullWidth
      fullScreen={fullScreen}
      maxWidth="xs"
      scroll="body"
      PaperProps={{ sx: { mx: 1 } }}
    >
      <DialogTitle sx={{ p: 2 }}>
        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
          <IconButton onClick={handleClose}>
            <Icon Component={CloseCircle} size="large" color="primary.main" />
          </IconButton>
          <Box component="span" fontWeight="bold" fontSize={18}>
            {changePassword
              ? t('securityForm.changePassword')
              : t('securityForm.addPassword')}
          </Box>
        </Box>
      </DialogTitle>

      <Box component="form" onSubmit={onFormSubmit}>
        <DialogContent
          sx={{
            display: 'flex',
            flexDirection: 'column',
            gap: 2,
            px: { xs: 2, sm: 3 },
          }}
        >
          {changePassword && (
            <>
              <TextField
                label={t('securityForm.currentPassword')}
                type={showCurrent ? 'text' : 'password'}
                fullWidth
                value={currentPassword}
                onChange={(e) => setCurrentPassword(e.target.value)}
                sx={{ '& .MuiOutlinedInput-root': { borderRadius: 2 }, mt: 2 }}
                InputProps={{
                  endAdornment: (
                    <InputAdornment position="end">
                      <IconButton
                        onClick={() => setShowCurrent(!showCurrent)}
                        type="button"
                      >
                        <Icon Component={showCurrent ? Eye : EyeSlash} />
                      </IconButton>
                    </InputAdornment>
                  ),
                }}
              />
              <Link
                sx={{ fontSize: '15px', cursor: 'pointer' }}
                onClick={() => navigate('/forget-password')}
              >
                {t('securityForm.forgetPassword')}
              </Link>
            </>
          )}

          <TextField
            label={t('securityForm.newPassword')}
            type={showNew ? 'text' : 'password'}
            fullWidth
            value={password}
            onChange={(e) => setPassword(e.target.value)}
            sx={{ '& .MuiOutlinedInput-root': { borderRadius: 2 }, mt: 2 }}
            InputProps={{
              endAdornment: (
                <InputAdornment position="end">
                  <IconButton
                    onClick={() => setShowNew(!showNew)}
                    type="button"
                  >
                    <Icon Component={showNew ? Eye : EyeSlash} />
                  </IconButton>
                </InputAdornment>
              ),
            }}
          />

          {showValidation && (
            <Box sx={{ mt: 1 }}>
              <PasswordValidationItem
                isValid={hasNumber}
                label={t('securityForm.hasNumber')}
              />
              <PasswordValidationItem
                isValid={hasMinLength}
                label={t('securityForm.hasMinLength')}
              />
              <PasswordValidationItem
                isValid={hasUpperAndLower}
                label={t('securityForm.hasUpperAndLower')}
              />
              <PasswordValidationItem
                isValid={hasSpecialChar}
                label={t('securityForm.hasSpecialChar')}
              />
            </Box>
          )}

          <TextField
            label={t('securityForm.confirmPassword')}
            type={showConfirm ? 'text' : 'password'}
            fullWidth
            value={confirmPassword}
            onChange={(e) => setConfirmPassword(e.target.value)}
            error={confirmPassword.length > 0 && !matchPassword}
            helperText={
              confirmPassword.length > 0 && !matchPassword
                ? t('securityForm.notCompatibility')
                : ' '
            }
            sx={{ '& .MuiOutlinedInput-root': { borderRadius: 2 } }}
            InputProps={{
              endAdornment: (
                <InputAdornment position="end">
                  <IconButton
                    onClick={() => setShowConfirm(!showConfirm)}
                    type="button"
                  >
                    <Icon Component={showConfirm ? Eye : EyeSlash} />
                  </IconButton>
                </InputAdornment>
              ),
            }}
          />
        </DialogContent>

        <DialogActions sx={{ px: 3, pb: 2, justifyContent: 'center' }}>
          <Button
            fullWidth
            sx={{ height: 48, textTransform: 'none' }}
            variant="contained"
            type="submit"
            disabled={loading}
          >
            {loading ? (
              <CircularProgress size={24} color="inherit" />
            ) : (
              t('securityForm.confirm')
            )}
          </Button>
        </DialogActions>
      </Box>
    </Dialog>
  );
}
