import { useState, useEffect } from "react"
import { User } from "../types"
import { Link } from "react-router-dom"
import axios from "axios"
import TopBar from "../components/TopBar"

import "../styles/EditProfile.css"

export default function EditProfile() {
    const [token, setToken] = useState<string>("");
    const [user, setUser] = useState<User>();

    useEffect(() => {
        const localToken = localStorage.getItem("token");
        if (localToken) {
            setToken(localToken)

            axios
                .post("/api/auth/me", { token: localToken })
                .then((res) => {
                    setUser(res.data);
                });
        }
    }, []);

    function uploadPfp(e: React.FormEvent) {
        e.preventDefault();

        const formData = new FormData();
        const fileInput = document.getElementById("pfp") as HTMLInputElement;
        if (fileInput.files) {
            formData.append("pfp", fileInput.files[0]);
        }
        formData.append("token", token);
        axios
            .post("/api/auth/me/uploadpfp", formData, { 
                headers: {
                    "Content-Type": "multipart/form-data",
                },
            })
            .then(() => {
                window.location.reload();
            })
            .catch((err) => {
                console.error(err.response.data);
            });
    }

    function deletePfp(e: React.FormEvent) {
        e.preventDefault();
        axios
            .post("/api/auth/me/deletepfp", { token: token })
            .then(() => {
                window.location.reload();
            })
            .catch((err) => {
                console.error(err.response.data);
            });
    }

    function editUsername(e: React.FormEvent) {
        e.preventDefault();
        const newUsername = (document.getElementById("username") as HTMLInputElement).value;
        axios
            .post("/api/auth/me/setusername", { token: token, username: newUsername })
            .then(() => {
                window.location.reload();
            })
            .catch((err) => {
                console.error(err.response.data);
            });
    }

    function editPassword(e: React.FormEvent) {
        e.preventDefault();
        const oldPassword = (document.getElementById("old-password") as HTMLInputElement).value;
        const newPassword = (document.getElementById("password") as HTMLInputElement).value;
        const confirmPassword = (document.getElementById("confirm-password") as HTMLInputElement).value;
        if (newPassword !== confirmPassword) {
            alert("Passwords do not match");
            return;
        }
        axios
            .post("/api/auth/me/setpassword", { token: token, oldPassword: oldPassword, password: newPassword })
            .then(() => {
                window.location.reload();
            })
            .catch((err) => {
                console.error(err.response.data);
            });
    }

    if (!user) {
        return (
            <div className="edit-profile-page">
                <TopBar user={user}/>
                <div className="edit-login">
                    <p>Please log in to edit your profile</p>
                    <Link to="/login">Login</Link>
                </div>
            </div>
        )
    }

    return (
        <div className="edit-profile-page">
            <TopBar user={user}/>
            <div className="edit-pfp">
                <h2>Edit Profile Picture</h2>
                <form>
                    <input type="file" name="pfp" id="pfp" />
                    <button onClick={uploadPfp}>Save</button>
                    <button onClick={deletePfp}>Delete</button>
                </form>
            </div>
            <div className="edit-username">
                <h2>Edit Username</h2>
                <form>
                    <input type="text" name="username" id="username"  placeholder={user?.username} />
                    <button onClick={editUsername}>Save</button>
                </form>
            </div>
            <div className="edit-password">
                <h2>Edit Password</h2>
                <form>
                    <input type="password" name="old-password" id="old-password" placeholder="Old password" />
                    <input type="password" name="password" id="password" placeholder="New password" />
                    <input type="password" name="confirm-password" id="confirm-password" placeholder="Confirm new password" />
                    <button onClick={editPassword}>Save</button>
                </form>
            </div>
        </div>
    )
}