import { Avatar, Box, Button, FormControl, IconButton, InputAdornment, OutlinedInput } from '@mui/material';
import { Edit, Visibility, VisibilityOff } from '@mui/icons-material';
import React, { useState } from 'react';
import Title from '../components/Title';
import { Stack } from '@mui/system';

function EditProfilePage() {
  const [nick, setNick] = useState('');
  const [password, setPassword] = useState('');
  const [confirmPassword, setConfirmPassword] = useState('');
  const [showPassword, setShowPassword] = useState(false);
  const [showConfirmPassword, setShowConfirmPassword] = useState(false);
  const handleClickShowPassword = () => setShowPassword((show) => !show);
  const handleClickShowConfirmPassword = () => setShowConfirmPassword((show) => !show);

  const handleMouseDownConfirmPassword = (event) => {
    event.preventDefault();
  };

  const handleMouseDownPassword = (event) => {
    event.preventDefault();
  };

  return (
    <Box>
      <Title>Edit profile</Title>
      <Box sx={{ display: 'flex', alignItems: 'center', mb: '40px' }}>
        <Avatar sx={{ width: '150px', height: '150px' }} />
        <Button sx={{ ml: '20px' }}><Edit />  Edit avatar</Button>
      </Box>
      <Box component='form' sx={{ display: 'flex', alignItems: 'center', mb: '40px' }}>
        <FormControl variant="outlined">
          <OutlinedInput
            placeholder="New nick"
            type="text"
            value={nick}
            onChange={e => setNick(e.target.value)} />
        </FormControl>
        <Button sx={{ ml: '20px' }}>Change nick</Button>
      </Box>
      <Box component='form' sx={{ display: 'flex', alignItems: 'center' }}>
        <Stack>
          <FormControl variant="outlined" sx={{ mb: '20px' }}>
            <OutlinedInput
              placeholder="password"
              type={showPassword ? 'text' : 'password'}
              value={password}
              onChange={e => setPassword(e.target.value)}
              endAdornment={
                <InputAdornment position="end">
                  <IconButton
                    onClick={handleClickShowPassword}
                    onMouseDown={handleMouseDownPassword}
                    edge="end"
                  >
                    {showPassword ? <VisibilityOff /> : <Visibility />}
                  </IconButton>
                </InputAdornment>
              } />
          </FormControl>
          <FormControl variant="outlined" sx={{ mb: '20px' }}>
            <OutlinedInput
              placeholder="Confirm password"
              type={showConfirmPassword ? 'text' : 'password'}
              error={password !== confirmPassword}
              value={confirmPassword}
              onChange={e => setConfirmPassword(e.target.value)}
              endAdornment={
                <InputAdornment position="end">
                  <IconButton
                    onClick={handleClickShowConfirmPassword}
                    onMouseDown={handleMouseDownConfirmPassword}
                    edge="end"
                  >
                    {showConfirmPassword ? <VisibilityOff /> : <Visibility />}
                  </IconButton>
                </InputAdornment>
              } />
          </FormControl>
        </Stack>
        <Button sx={{ ml: '20px' }}>Change password</Button>
      </Box>
    </Box>
  )
}

export default EditProfilePage;

{/* 

const ShowNick = () => {
    const {data, isFetching} = useGetUserByIdQuery('632205aeb74e1f5f2ec1a320')
    if (isFetching){
        return <h1>Loading</h1>
    }
    console.log(data)
    return (
        <h1>NICK: {data && data.UserFindOne && data.UserFindOne.nick}</h1>
    )
}
    const SetNick = () => {
    const [nick, setNickState] = useState('')
    const dispatch = useDispatch()
    return (
        <div>
            <input value={nick} onChange={e => setNickState(e.target.value)}/>
            <button onClick={() => dispatch(actionSetNick(nick))}>Save</button>
        </div>
    )
} */}