import React, {useState} from 'react'
import api from "../api";

export default function UserModule() {
    const username = localStorage.getItem("username")
    const [oldPassword, setOldPassword] = useState("")
    const [newPassword1, setNewPassword1] = useState("")
    const [newPassword2, setNewPassword2] = useState("")
    const [loading, setLoading] = useState(false)

    const handlePasswordChange = async () => {
            setLoading(true);
            try {
                const response = await api.post(`user/password/change/`, {username, oldPassword, newPassword1, newPassword2});
                if (response.status === 200) {
                    alert(response.data.message)
                    window.location.reload()
                }
            } catch (error) {
                alert(error);
            } finally {
                setLoading(false);
            }
        };

    return (
        <div className="d-flex flex-column align-items-center justify-content-center p-2">
            <h4>User Module for {username.charAt(0).toUpperCase() + username.slice(1)}</h4>
            <div className="d-flex flex-column align-items-center justify-content-center p-2">
                <h5>Change Your Password</h5>
                <div className="d-flex flex-column align-items-center justify-content-center p-2">
                    <form>
                        <div className="mb-3 d-flex flex-column">
                            <label htmlFor="oldPassword" className="form-label">Enter current password:</label>
                            <input id="oldPassword" type="text" onChange={(e) => {
                                setOldPassword(e.target.value)
                            }}></input>
                        </div>
                        <div className="mb-3 d-flex flex-column">
                            <label htmlFor="newPassword1" className="form-label">Enter new password:</label>
                            <input id="newPassword1" type="password" onChange={(e) => {
                                setNewPassword1(e.target.value)
                            }}></input>
                        </div>
                        <div className="mb-3 d-flex flex-column">
                            <label htmlFor="newPassword2" className="form-label">Confirm new password:</label>
                            <input id="newPassword2" type="password" onChange={(e) => {
                                setNewPassword2(e.target.value)
                            }}></input>
                        </div>
                        <div className="mb-3 d-flex flex-column">
                            <button type="button" className="btn btn-secondary" onClick={handlePasswordChange}>Submit</button>
                        </div>
                    </form>
                    {loading ? (
                        <div className="spinner-border" role="status">
                        <span className="sr-only">Loading...</span>
                    </div>
                ) : null
                }
                </div>
            </div>
        </div>
    )
}