import Navbar from "../components/Navbar.jsx";
import {useState} from "react";


export default function Account() {

    let user = JSON.parse(localStorage.getItem("user")) || {};

    const [username, setUsername] = useState(user.username || "");
    const [email, setEmail] = useState(user.email || "");
    const [password, setPassword] = useState("");
    const [confirmPassword, setConfirmPassword] = useState("");
    const [isPictureEditActive, setIsPictureEditActive] = useState(false);

    const [userChannel, setUserChannel] = useState(null);

    const fetchUserChannel = async () => {
        try {
            const response = await fetch(`/api/channels/${user.id}`);
            if (!response.ok) {
                throw new Error("Failed to fetch user data");
            }
            const data = await response.json();
            setUserChannel(data);
        } catch (error) {
            console.error("Error fetching user channel:", error);
            return null;
        }
    }


    const [editMode, setEditMode] = useState(false);

    const nonEditModeClasses = "text-2xl font-bold text-white p-2 focus:text-white focus:outline-none w-full font-montserrat";
    const editModeClasses = nonEditModeClasses + " glassmorphism";

    return (
        <div className="min-w-screen min-h-screen  bg-linear-to-br from-left-gradient to-right-gradient">
            <Navbar/>

            <main className="px-36 pt-[118px]">
                {/* Left side */}

                    {/* Profile / Edit profile */}
                    <form className="glassmorphism  w-1/3 p-10">
                        <div className="relative w-1/3 aspect-square overflow-hidden mb-3 mx-auto" onMouseEnter={() => setIsPictureEditActive(true)} onMouseLeave={() => setIsPictureEditActive(false)} >
                            <label htmlFor="image">
                                <img
                                    src={user.picture}
                                    className="w-full aspect-square rounded-full object-cover"
                                />
                                <div className={`absolute w-full h-full bg-[#000000EF] flex items-center justify-center top-0 left-0 rounded-full ${(isPictureEditActive && editMode) ? "opacity-100 cursor-pointer" : "opacity-0 cursor-default"} ` } >
                                    <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" className="fill-white" viewBox="0 0 24 24">
                                        <path d="M19.045 7.401c.378-.378.586-.88.586-1.414s-.208-1.036-.586-1.414l-1.586-1.586c-.378-.378-.88-.586-1.414-.586s-1.036.208-1.413.585L4 13.585V18h4.413L19.045 7.401zm-3-3 1.587 1.585-1.59 1.584-1.586-1.585 1.589-1.584zM6 16v-1.585l7.04-7.018 1.586 1.586L7.587 16H6zm-2 4h16v2H4z"></path>
                                    </svg>
                                </div>
                            </label>
                            <input type="file" accept="image/*" id="image" className="absolute inset-0 w-full h-full opacity-0 cursor-pointer" disabled={!editMode}/>
                        </div>
                        <label htmlFor="name" className="text-2xl text-white mb-1 block font-montserrat">
                        Nom d'utilisateur
                        </label>
                        <input
                            type="text"
                            id="name"
                            value={username}
                            className={(editMode ? editModeClasses : nonEditModeClasses)}
                            onChange={(e) => setUsername(e.target.value)}
                            placeholder="Nom d'utilisateur"
                            disabled={!editMode}
                        />

                        <label htmlFor="email" className="text-2xl text-white mb-1 mt-4 block font-montserrat">
                            Adresse e-mail
                        </label>
                        <input
                            type="email"
                            id="email"
                            value={email}
                            className={(editMode ? editModeClasses : nonEditModeClasses)}
                            onChange={(e) => setEmail(e.target.value)}
                            placeholder="Adresse mail"
                            disabled={!editMode}
                        />

                        { editMode && (
                            <>
                                <label htmlFor="password" className="text-2xl text-white mb-1 mt-4 block font-montserrat">
                                    Mot de passe
                                </label>
                                <input
                                    type="password"
                                    id="password"
                                    value={password}
                                    className={(editMode ? editModeClasses : nonEditModeClasses)}
                                    onChange={(e) => setPassword(e.target.value)}
                                    placeholder="**************"
                                    disabled={!editMode}
                                />

                                <label htmlFor="confirm-password" className="text-2xl text-white mb-1 mt-4 block font-montserrat">
                                    Confirmer le mot de passe
                                </label>
                                <input
                                    type="password"
                                    id="confirm-password"
                                    value={confirmPassword}
                                    className={(editMode ? editModeClasses : nonEditModeClasses)}
                                    onChange={(e) => setConfirmPassword(e.target.value)}
                                    placeholder=""
                                    disabled={!editMode}
                                />
                            </>
                        )

                        }

                        <div className="flex justify-center mt-5">
                            <button
                                type="button"
                                className="bg-primary p-3 rounded-sm text-white font-montserrat text-2xl font-black cursor-pointer"
                                onClick={() => setEditMode(!editMode)}
                            >
                                {editMode ? "Enregistrer" : "Modifier le profil"}
                            </button>
                        </div>
                    </form>

                { /* Right side */}

                    {/* Channel */}

                    {/* Playlists */}

                    {/* History */}

            </main>

        </div>
    )

}