import React, { useState, useEffect } from "react";
import Header from "../components/Header";
import Footer from "../components/Footer";
import axios from "axios";
import { Button } from "react-bootstrap";

export default function Profile() {
    const [user, setUser] = useState({});

    function Verified({isVerified}) {
        if (isVerified) {
            return <div>✔</div>
        }
        return <div>X</div>
    }

    function ProfileInfo({user}) {
        if (!user.name) {
            return (<div className="profile-sect" id="profile-info">
                Login to view profile info
                </div>)
        }
        return (
            <div className="profile-sect" id="profile-info">
                <div id="profile-info-labels">
                    <div>Name</div>
                    <div>Email</div>
                    <div>Verified</div>
                    {/* <div>Address</div>
                    <div>Phone</div> */}
                </div>
                <div id="profile-info-display">
                    <div>{user.name}</div>
                    <div>{user.email}</div>
                    <Verified isVerified={user.vt_member}/>
                </div>
            </div>
        )
    }

    useEffect(() => {
        async function fetchData() {
            try {
                let id = JSON.parse(localStorage.getItem('user')).userID;
                axios.get('http://localhost:3000/user/id/'+id)
                    .then((res) => {
                        setUser(res.data);
                        console.log("User retrieved successfully");
                    })
                    .catch((error) => {
                        console.error("User retrieval error", error);
                    });
            } catch (error) {
                console.log("Error fetching data: ", error);
            }
        }
        fetchData();
    }, []);
    return (
        <div>
            <Header/>
            <main className="profile">
                <span className="profile-sect" id="profile-img-info">
                    {/* placeholder image */}
                    <img src="./images/account.png" alt="account"></img>
                    <Button>Upload image...</Button>
                </span>
                <ProfileInfo user={user} />
                {/* name, email, vt_member, address, phone */}
            </main>
            <Footer/>
        </div>
    )
}