import Modal from "../ui/modal/modal.jsx";
import Button from "../ui/button/button.jsx";
import styles from "./SettingsModal.module.css"
import { useContext, useState } from "react";
import ThemeSwitcher from "../ui/themeSwitcher/ThemeSwitcher.jsx";
import { AuthContext } from "../../contexts/auth/AuthContext.js";
import TextInput from "../ui/input/input.jsx";
import updateUser from "../../utils/users/updateUser.js";


export default function SettingsModal() {

    const { user, logout, update } = useContext(AuthContext);

    const [open, setOpen] = useState(false);

    const [name, setName] = useState(user.name);
    const [lastname, setLastName] = useState(user.lastname);
    const [phone, setPhone] = useState(user.phone);

    const handleLogout = () => {
        logout();
    }

    const handleSubmit = async () => {
        await updateUser(name, lastname, phone);
        update();
    }

    return (
        <>
            <Button variant={"transparent"} onClick={() => setOpen(!open)}>
                <img src={"/icons/settings-wheel.svg"} alt={"Modify btn"} className={styles.modifyIcon}/>
            </Button>

            <Modal title={"Paramètres"} open={open} onClose={() => setOpen(false)}>
                <div className={styles.content}>

                    <div className={styles.section}>
                        <h3>Compte</h3>
                        <Button variant={"danger"} onClick={handleLogout}> Déconnexion </Button>

                        <div className={styles.section}>
                            <h4>Changer de Prénom</h4>
                            <TextInput value={name} onChange={e => setName(e.target.value)} type={"text"} />
                        </div>

                        <div className={styles.section}>
                            <h4>Changer de nom</h4>
                            <TextInput value={lastname} onChange={e => setLastName(e.target.value)} type={"text"} />
                        </div>

                        <div className={styles.section}>
                            <h4>Changer de numéro de téléphone</h4>
                            <TextInput value={phone} onChange={e => setPhone(e.target.value)} type={"text"} />
                        </div>

                        <Button className={styles.submitBtn} onClick={handleSubmit}>Confirmer</Button>

                    </div>

                    <div className={styles.section}>
                        <h3>Apparence</h3>
                        <ThemeSwitcher />
                    </div>
                </div>
            </Modal>
        </>
    )
}