import { useState } from "react";
import { Box, Button, TextField, Typography, InputAdornment, IconButton } from '@mui/material';
import VisibilityOffIcon from '@mui/icons-material/VisibilityOff';
import VisibilityIcon from '@mui/icons-material/Visibility';
import GradientTextField from '../GradientTextField';
import GradientVisibilityToggleIcon from '../../assets/Icons/GradientVisibilityToggleIcon'
import { useNavigate } from 'react-router-dom'

interface AuthFormProps {
  config: {
    username: string;
    password: string;
  };
  handleInputChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
  onLogin: () => void;
}

const AuthForm = ({ config, handleInputChange, onLogin }: AuthFormProps) => {
  const [showPassword, setShowPassword] = useState(false);
  const navigate = useNavigate();
  return (
    <Box
      sx={{
        display: 'flex',
        flexDirection: 'column',
        gap: '1.5vw',
        alignItems: 'center',
      }}
    >
      <GradientTextField
        label="Никнейм"
        required
        name="username"
        value={config.username}
        onChange={handleInputChange}
        sx={{
          mt: '2.5vw',
          mb: '0vw'
        }}
      />
      <GradientTextField
        label="Пароль"
        required
        type={showPassword ? "text" : "password"}
        name="password"
        value={config.password}
        onChange={handleInputChange}
        sx={{
          '& .MuiInputBase-input': {
          color: 'white',
          padding: '1rem 0.7rem 1.1rem 1.5rem',
          fontFamily: 'Benzin-Bold',
        },
        }}
        InputProps={{
          endAdornment: (
            <InputAdornment position="end" sx={{ margin: '0' }}>
              <IconButton
                disableRipple
                disableFocusRipple
                disableTouchRipple
                onClick={() => setShowPassword((prev) => !prev)}
                edge="end"
                sx={{
                  color: "white",
                  margin: '0',
                  padding: '0',
                  '& MuiTouchRipple-root css-r3djoj-MuiTouchRipple-root': {
                    display: 'none',
                  },
                }}>
                <GradientVisibilityToggleIcon
                  crossed={showPassword}     // когда type="text" -> перечеркнуть
                  sx={{ fontSize: "2.5vw", mr: '0.5vw' }}
                />
              </IconButton>
            </InputAdornment>
          ),
        }}
      />
      <Button onClick={onLogin} variant="contained"
      sx={{
        transition: 'transform 0.3s ease',
        width: '60%',
        mt: 2,
        background: 'linear-gradient(71deg, #F27121 0%, #E940CD 70%, #8A2387 100%)',
        fontFamily: 'Benzin-Bold',
        borderRadius: '2.5vw',
        fontSize: '2vw',
        '&:hover': {
          transform: 'scale(1.02)',

        },
      }}>
        Войти
      </Button>
      <Box
        sx={{
        display: 'flex',
        justifyContent: 'flex-end',
      }}
      >
        <Typography
          onClick={() => navigate('/registration')}
          sx={{
            fontFamily: 'Benzin-Bold',
            fontSize: '1vw',
            textTransform: 'uppercase',
            letterSpacing: '0.08em',
            cursor: 'pointer',
            backgroundImage:
            'linear-gradient(71deg, #F27121 0%, #E940CD 60%, #8A2387 100%)',
            WebkitBackgroundClip: 'text',
            WebkitTextFillColor: 'transparent',
            textShadow: '0 0 15px rgba(0,0,0,0.9)',
            '&:hover': {
              opacity: 1,
            },
            }}
          >
          Зарегистрироваться
        </Typography>
      </Box>
    </Box>
  );
};

export default AuthForm;