import { Grid } from "antd";
import { useMemo } from "react";
import dayjs from "dayjs";
import isBetween from "dayjs/plugin/isBetween";
import {useSelector} from "react-redux"; // Import isBetween plugin

dayjs.extend(isBetween); // Extend dayjs with isBetween

const { useBreakpoint } = Grid;

const useHomePageUI = (appointments, scheduledAppointments, patients) => {
    const screens = useBreakpoint();

    const containerStyle = { padding: screens.xs ? 16 : 24 };
    const sectionStyle = { marginBottom: 24 };
    const cardStyle = { height: "100%" };
    const listItemStyle = { cursor: "pointer", padding: "12px", borderRadius: 4 };
    const buttonStyle = { width: screens.xs ? "100%" : "auto" };
    const chartContainerStyle = { padding: 16, background: "#fff", borderRadius: 4 };

    const todayEvents = useMemo(() => {
        return [...appointments, ...scheduledAppointments].filter((event) =>
            dayjs(event.appointment_datetime || event.scheduled_datetime).isSame(dayjs(), "day")
        );
    }, [appointments, scheduledAppointments]);

    const upcomingBirthdays = useMemo(() => {
        return patients.filter((p) =>
            dayjs(p.birthday).isBetween(dayjs(), dayjs().add(7, "day"), "day", "[]")
        );
    }, [patients]);

    const appointmentsByDay = useMemo(() => {
        const data = Array(7).fill(0);
        appointments
            .filter((app) =>
                dayjs(app.appointment_datetime).isBetween(dayjs().startOf("week"), dayjs().endOf("week"), "day", "[]")
            )
            .forEach((app) => {
                const dayIndex = dayjs(app.appointment_datetime).day();
                data[dayIndex === 0 ? 6 : dayIndex - 1]++;
            });
        return data;
    }, [appointments]);

    const scheduledAppointmentsByDay = useMemo(() => {
        const data = Array(7).fill(0);
        scheduledAppointments
            .filter((app) =>
                dayjs(app.scheduled_datetime).isBetween(dayjs().startOf("week"), dayjs().endOf("week"), "day", "[]")
            )
            .forEach((app) => {
                const dayIndex = dayjs(app.scheduled_datetime).day();
                data[dayIndex === 0 ? 6 : dayIndex - 1]++;
            });
        return data;
    }, [scheduledAppointments]);

    const chartOptions = {
        responsive: true,
        maintainAspectRatio: false,
        scales: {
            y: { beginAtZero: true, title: { display: true, text: "Количество приемов" } },
            x: { title: { display: true, text: "День недели" } },
        },
        plugins: {
            legend: { display: false },
            title: { display: true, text: "Приемы за неделю" },
        },
    };

    const chartData = {
        labels: ["Пн", "Вт", "Ср", "Чт", "Пт", "Сб", "Вс"],
        datasets: [
            {
                label: "Приемы",
                data: appointmentsByDay,
                backgroundColor: "#1890ff",
                borderColor: "#096dd9",
                borderWidth: 1,
            },
            {
                label: "Запланированные приемы",
                data: scheduledAppointmentsByDay,
                backgroundColor: "#ff4d4f",
                borderColor: "#ff4d4f",
                borderWidth: 1,
            },
        ],
    };

    return {
        containerStyle,
        sectionStyle,
        cardStyle,
        listItemStyle,
        buttonStyle,
        chartContainerStyle,
        isMobile: screens.xs,
        todayEvents,
        upcomingBirthdays,
        appointmentsByDay,
        chartData,
        chartOptions,
    };
};

export default useHomePageUI;