import { useParams } from "react-router-dom";

import { fetchAppData, setAppData } from "../lib/fire";
import { useEffect, useState } from "react";
import Stat from "./components/stat";

function AppSite() {
    const { appid } = useParams();

    const [appdata, setappdata] = useState({});
    const [changingname, setchangingname] = useState(false);
    const [newName, setnewName] = useState(null);

    useEffect(() => {
        async function main() {
            const data = await fetchAppData(appid);
            setappdata(data);
            setnewName(data.name);
        }

        main();
    }, [appid]);

    useEffect(()=>{
        async function main() {
            setAppData(appid, newName);
            appdata.name = newName;
        }
            
        main();
    });

    return (
        <div className="p-8">
            <div className="flex flex-col gap-2">
                <div className="flex flex-col">
                    <div>
                        {
                            changingname?
                                <input className="text-size-xl border-none border-none" type="text" onChange={(e) => setnewName(e.target.value)} value={newName} />
                                :
                                <span className="text-size-xl">
                                    {appdata?.name}
                                </span>
                                }
                        <button onClick={() => setchangingname(!changingname)} className="border-none bg-none pointer">
                            <span className="material-symbols-outlined">
                                edit
                            </span>
                        </button>
                    </div>
                    <div style={{ height: 1, backgroundColor: "black", width: "15%" }}></div>
                    <span className="text-size-sm">
                        {appdata?.id}
                    </span>
                </div>
                <div className="flex wrap gap-4 pt-16 flex-1">
                    <Stat stat="Views" val={appdata?.views} good={1000} />
                    <Stat stat="Crashes" val={appdata?.crashes} />
                </div>
            </div>
        </div>
    )
}

export default AppSite;