import { useRef, useState } from 'react';
import { useTranslation } from 'react-i18next';

import { Fade, FormControl, IconButton, Stack, useTheme } from '@mui/material';
import { IconEye, IconEyeClosed } from '@tabler/icons-react';

import CustomHelperText from '../Base/CustomHelperText';
import CustomInput from '../Base/CustomInput';
import CustomLabel from '../Base/CustomLabel';
import { type InputProps } from '../Classic/types';

type InputPasswordProps = Omit<InputProps, 'transform'>;

const InputPassword = ({
  onChange,
  value,
  label,
  success,
  error,
  errorText,
  helperText,
  disabled,
  sx = {},
  fullWidth = true,
  hasCounter = false,
  maxLength = 50,
  showClear = true,
  size,
  ...inputProps
}: InputPasswordProps) => {
  const [showPassword, setShowPassword] = useState(false);
  const hasMouseDown = useRef(false);
  const theme = useTheme();
  const { t } = useTranslation('material_hu_only');

  const handleTogglePassword = () => {
    if (!hasMouseDown.current) {
      setShowPassword(!showPassword);
    }
    hasMouseDown.current = false;
  };

  const handleMouseDown = (event: React.MouseEvent) => {
    event.preventDefault();
    hasMouseDown.current = true;
    setShowPassword(!showPassword);
  };

  const iconWrapperSx = {
    position: 'absolute',
    alignItems: 'center',
    justifyContent: 'center',
  };

  const iconProps = {
    size: 24,
    color: theme.palette.new.text.neutral.default,
  };

  const ariaLabel = showPassword
    ? t('password.hide_password')
    : t('password.show_password');

  return (
    <FormControl
      sx={sx}
      error={error}
      fullWidth={fullWidth}
      disabled={disabled}
    >
      <CustomLabel
        label={label}
        success={success}
      />
      <CustomInput
        {...inputProps}
        value={value}
        onChange={onChange}
        success={success}
        disabled={disabled}
        endAdornment={
          !disabled && (
            <IconButton
              aria-label={ariaLabel}
              sx={{
                position: 'relative',
                width: '24px',
                '&:hover': {
                  backgroundColor: 'transparent',
                },
              }}
              onMouseDown={handleMouseDown}
              onClick={handleTogglePassword}
            >
              <Fade
                in={showPassword}
                timeout={400}
              >
                <Stack sx={iconWrapperSx}>
                  <IconEye {...iconProps} />
                </Stack>
              </Fade>
              <Fade
                in={!showPassword}
                timeout={400}
              >
                <Stack sx={iconWrapperSx}>
                  <IconEyeClosed {...iconProps} />
                </Stack>
              </Fade>
            </IconButton>
          )
        }
        type={showPassword ? 'text' : 'password'}
        showClear={showClear}
        size={size}
      />
      <CustomHelperText
        helperText={error ? errorText : helperText}
        hasCounter={hasCounter}
        maxLength={maxLength}
        value={value}
        success={success}
        error={error}
      />
    </FormControl>
  );
};

export type { InputPasswordProps };

export default InputPassword;