import React, { useState } from 'react';
import InputAdornment from '@mui/material/InputAdornment';
import OutlinedInput from '@mui/material/OutlinedInput';
import IconButton from '@mui/material/IconButton';
import Visibility from '@mui/icons-material/Visibility';
import VisibilityOff from '@mui/icons-material/VisibilityOff';
import { FormControl, Button } from '@mui/material';

const LoginForm = ({submit, onSubmit}) => {
  const [login, setLogin] = useState('');
  const [password, setPassword] = useState('');
  const [showPassword, setShowPassword] = useState(false);
  const handleClickShowPassword = () => setShowPassword((show) => !show);
  const handleMouseDownPassword = (event) => {
    event.preventDefault();
  };
  return (
    <>
      <FormControl variant="outlined">
        <OutlinedInput
          placeholder="login"
          type="text"
          value={login}
          onChange={e => setLogin(e.target.value)} />
      </FormControl>
      <FormControl variant="outlined">
        <OutlinedInput
          placeholder="password"
          type={showPassword ? 'text' : 'password'} value={password}
          onChange={e => setPassword(e.target.value)}
          endAdornment={
            <InputAdornment position="end">
              <IconButton
                aria-label="toggle password visibility"
                onClick={handleClickShowPassword}
                onMouseDown={handleMouseDownPassword}
                edge="end"
              >
                {showPassword ? <VisibilityOff /> : <Visibility />}
              </IconButton>
            </InputAdornment>
          } />
      </FormControl>
      <Button variant="contained" onClick={() => onSubmit(login, password)}>{submit}</Button>
      </>

  )
}

export default LoginForm;