"use client";
import { useAlert } from "@core/Store/Alert.Store";
import {
    useEventHandlerStore,
    EVENT_TYPES,
} from "@core/Store/EventHandler.Store";
import { useLocationStore } from "@core/Store/Location.Store";
import { useParams } from "next/navigation";
import { useEffect, useState } from "react";
import { findAppointmentsAdminByClient } from "./Appointments.Service";
import ClientsIcon from "@mui/icons-material/AccountBoxOutlined";
import { AppointmentAdminByClientView } from "@core/Models/Appointments.model";
import ServiceItem from "@core/app/components/ServiceItem/ServiceItem";
import Location from "@core/app/components/Location/Location";
import { useNavigation } from "@core/app/hooks/goto";
import { useMenuStore } from "@core/Store/Menu.Store";

type UrlData = {
    oid: string;
    clientId: string;
};

export default function ClientAppointments() {
    const data = useParams<UrlData>();
    const id = data.oid;
    const clientId = data.clientId;
    const alert = useAlert();
    const location = useLocationStore();
    const eventHandler = useEventHandlerStore();
    const menu = useMenuStore();
    const { goTo } = useNavigation();

    const [appintments, setAppointments] =
        useState<AppointmentAdminByClientView>({
            events: [],
        });

    useEffect(() => {
        eventHandler.setEventType(EVENT_TYPES.SLEEP);

        menu.clear();
    }, []);

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

        location.add({
            url: "/admin/org/profile/" + id + "/clients",
            title: "Clientes",
            icon: null,
        });

        location.add({
            url: "/admin/org/" + id + "/client/" + clientId + "/profile",
            title: "Perfil",
            icon: <ClientsIcon sx={{ mr: 0.5 }} fontSize="inherit" />,
        });

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

    useEffect(() => {
        findAppointmentsAdminByClient({
            clientId: clientId,
            companyId: id,
        })
            .then((appointment) => {
                setAppointments(appointment);
            })
            .catch((error) => {
                alert.showError(error.message);
            });
    }, []);

    return (
        <>
            <Location />

            <div
                style={{
                    marginTop: "30px",
                    display: "grid",
                    gridTemplateColumns: "repeat(auto-fill, minmax(300px, 1fr))",
                    gap: "20px",
                }}
            >
                {appintments.events.length === 0 ? (
                    <div style={{
                        gridColumn: "1 / -1",
                        textAlign: "center",
                        padding: "40px 20px",
                        background: "#fff",
                        borderRadius: "12px",
                        boxShadow: "0 4px 15px rgba(0,0,0,0.02)",
                        color: "#7f8c8d"
                    }}>
                        No hay turnos registrados para este cliente.
                    </div>
                ) : (
                    appintments.events.map((event, index) => {
                        return (
                            <ServiceItem
                                key={"appintment." + index}
                                data={event}
                                onClick={() => {
                                    goTo(
                                        "/admin/org/" +
                                            id +
                                            "/client/" +
                                            clientId +
                                            "/appointments/" +
                                            event.id
                                    );
                                }}
                            />
                        );
                    })
                )}
            </div>
        </>
    );
}
