"use client";
import ButtonOption from "@components/ButtonOption/ButtonOption";
import { useRouter } from "next/navigation";
import Location from "@components/Location/Location";
import { useLocationStore } from "@store/Location.Store";
import { useEffect } from "react";
import AccountCircleOutlinedIcon from "@mui/icons-material/AccountCircleOutlined";
import { useBottomToolbarStore } from "@core/Store/BottomToolbar.Store";

export default function Profile() {
    const router = useRouter();
    const location = useLocationStore();
    const bottomToolbar = useBottomToolbarStore();

    const goTo = (path: string) => {
        router.push(path);
    };

    useEffect(() => {
        location.clear();

        location.add({
            url: "/user/profile",
            title: "Perfil de usuario",
            icon: <AccountCircleOutlinedIcon sx={{ fontSize: "32px", mr: "10px" }} />,
        });

        bottomToolbar.set(<></>);
    }, []);

    return (
        <>
            <Location />
            <div style={{ lineHeight: "20px" }}>&nbsp;</div>
            <ButtonOption
                text="Editar perfil"
                icon="/profile-icon.svg"
                onClick={() => goTo("/user/profile/edit")}
            />
            <ButtonOption
                text="Seguridad"
                icon="/security-icon.svg"
                onClick={() => goTo("/user/profile/security")}
            />
            <ButtonOption
                text="Editar domicilio"
                icon="/location-icon.svg"
                onClick={() => goTo("/user/profile/address")}
            />
            <ButtonOption
                text="Notificaciones"
                icon="/notifications-icon.svg"
                onClick={() => goTo("/user/profile/notifications")}
            />
            <ButtonOption
                text="Avanzado"
                icon="/services-icon.svg"
                onClick={() => goTo("/user/profile/advanced")}
            />
        </>
    );
}
