"use client";
import ButtonOption from "@components/ButtonOption/ButtonOption";
import Location from "@components/Location/Location";
import StorefrontOutlinedIcon from "@mui/icons-material/StorefrontOutlined";
import ClientsIcon from "@mui/icons-material/AccountBoxOutlined";
import { useLocationStore } from "@store/Location.Store";
import { useNavigation } from "@hooks/goto";
import { useParams } from "next/navigation";
import { useEffect } from "react";

type UrlData = {
    oid: string;
    clientId: string;
};
export default function ClientProfile() {
    const data = useParams<UrlData>();
    const oid = data.oid;
    const clientId = data.clientId;

    const location = useLocationStore();
    const { goTo } = useNavigation();

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

        location.add({
            url: "/admin/org",
            title: "Mis organizaciones",
            icon: null,
        });

        location.add({
            url: "/admin/org/profile/" + oid,
            title: "Organizacion",
            icon: (
                <StorefrontOutlinedIcon sx={{ mr: 0.5 }} fontSize="inherit" />
            ),
        });

        location.add({
            url: "",
            title: "Perfil del cliente",
            icon: <ClientsIcon sx={{ fontSize: "32px", mr: "10px" }} />,
        });
    }, []);

    return (
        <>
            <Location />
            <div
                style={{
                    display: "flex",
                    flexDirection: "column",
                    marginTop: "20px",
                    gap: "10px",
                }}
            >
                <ButtonOption
                    text="Editar"
                    icon="/profile-icon.svg"
                    onClick={() =>
                        goTo(
                            "/admin/org/" +
                                oid +
                                "/client/" +
                                clientId +
                                "/edit"
                        )
                    }
                />
                <ButtonOption
                    text="Turnos"
                    icon="/profile-icon.svg"
                    onClick={() =>
                        goTo(
                            "/admin/org/" +
                                oid +
                                "/client/" +
                                clientId +
                                "/appointments"
                        )
                    }
                />
                <ButtonOption
                    text="Fusionar Duplicados"
                    icon="/client-merge-icon.svg"
                    onClick={() =>
                        goTo(
                            "/admin/org/" +
                                oid +
                                "/client/" +
                                clientId +
                                "/merge"
                        )
                    }
                />
                <ButtonOption
                    text="Repeticiones"
                    icon="/repeat-icon.svg"
                    onClick={() =>
                        goTo(
                            "/admin/org/" +
                                oid +
                                "/client/" +
                                clientId +
                                "/repeats"
                        )
                    }
                />
                <ButtonOption
                    text="Cuenta"
                    icon="/account-icon.svg"
                    onClick={() =>
                        goTo(
                            "/admin/org/" +
                                oid +
                                "/client/" +
                                clientId +
                                "/account"
                        )
                    }
                />
            </div>
        </>
    );
}
