import { Button, TextField } from "@mui/material"
import { useEffect, useState } from "react";
import { connect } from "react-redux";
import { actionCheckPassword } from "../../../actions/actionLogin";
import { actionUpsertUser } from "../../../actions/actionsForUser";
import { UserEditorSubModalsTitle, UserEditorSubModalsWrap, UserEditorSubModalsFooter } from "./UserEditorSubModals.style"

const UserPasswordEditor = ({login, disabled, handleClose, updateUser, checkPassword}) => {

    const [currPassword, setCurrPassword] = useState('');
    const [newPassword, setNewPassword] = useState('');
    

    useEffect(() => {
        checkPassword(login, currPassword);
        
    }, [currPassword])

    return(
        <UserEditorSubModalsWrap>
            <UserEditorSubModalsTitle>Edit your password</UserEditorSubModalsTitle>
            <TextField
                autoFocus
                sx={{width: '100%', mt: '20px'}}
                id="standard-basic" 
                label="Password" 
                variant="standard"
                value={currPassword}
                onChange={(e) => setCurrPassword(e.target.value)}
            />
            <TextField
                autoFocus
                sx={{width: '100%', mt: '20px'}}
                id="standard-basic" 
                label="New Password" 
                variant="standard"
                disabled={!disabled}
                value={newPassword}
                onChange={(e) => setNewPassword(e.target.value)}
            />
            <UserEditorSubModalsFooter>
                <Button variant="text" onClick={handleClose}>Cancel</Button>
                <Button variant="text" disabled={newPassword ? false : true} onClick={() => {updateUser(null, null, newPassword, null); handleClose()}}>Save</Button>
            </UserEditorSubModalsFooter>
        </UserEditorSubModalsWrap>
    )
}

export default connect(state => 
    ({login: state?.promise?.aboutMe?.payload?.login || '', disabled: state?.promise?.checkedPassword?.payload || null}),
    {updateUser: actionUpsertUser, checkPassword: actionCheckPassword})(UserPasswordEditor);