import { useDispatch, useSelector } from "react-redux";
import { Grid } from "antd";
import {
    setHovered,
    setSelectedAppointment,
    setSelectedScheduledAppointment,
    toggleSider,
    openScheduledModal,
} from "../../../Redux/Slices/appointmentsSlice.js";
import { useEffect, useMemo } from "react";
import dayjs from "dayjs";

const { useBreakpoint } = Grid;

const useAppointmentsUI = (appointments, scheduledAppointments) => {
    const dispatch = useDispatch();
    const {
        collapsed,
        siderWidth,
        hovered,
        selectedAppointment,
    } = useSelector(state => state.appointmentsUI);
    const screens = useBreakpoint();

    useEffect(() => {
        document.title = "Приемы";
    }, []);

    const splitterStyle = { flex: 1 };
    const splitterContentPanelStyle = { padding: 16 };
    const splitterSiderPanelStyle = { padding: "16px", borderLeft: "1px solid #ddd", overflowY: "auto" };
    const siderTitleStyle = { marginBottom: 36 };
    const siderButtonContainerStyle = {
        position: "fixed",
        right: 0,
        top: "50%",
        transform: "translateY(-50%)",
        transition: "right 0.3s ease",
        zIndex: 1000,
        display: screens.xs ? "none" : "block",
    };
    const siderButtonStyle = {
        width: hovered ? 250 : 50,
        padding: hovered ? "0 20px" : "0",
        overflow: "hidden",
        textAlign: "left",
        transition: "width 0.3s ease, padding 0.3s ease",
        borderRadius: "4px 0 0 4px",
    };

    const handleToggleSider = () => dispatch(toggleSider());
    const handleHoverSider = () => dispatch(setHovered(true));
    const handleLeaveSider = () => dispatch(setHovered(false));

    const handleCancelViewModal = () => {
        if (selectedAppointment) {
            dispatch(setSelectedAppointment(null));
        } else {
            dispatch(setSelectedScheduledAppointment(null));
        }
    };

    const openCreateScheduledAppointmentModal = () => {
        dispatch(openScheduledModal());
    };

    const siderButtonText = useMemo(() => hovered ? (collapsed ? "Показать предстоящие события" : "Скрыть предстоящие события") : "", [collapsed, hovered]);
    const showSplitterPanel = useMemo(() => !collapsed && !screens.xs, [collapsed, screens]);

    const upcomingEvents = [...appointments, ...scheduledAppointments]
        .filter(app => dayjs(app.appointment_datetime || app.scheduled_datetime).isAfter(dayjs()))
        .sort((a, b) => dayjs(a.appointment_datetime || a.scheduled_datetime) - dayjs(b.appointment_datetime || b.scheduled_datetime))
        .slice(0, 5);

    return {
        collapsed,
        siderWidth,
        hovered,
        showSplitterPanel,
        siderButtonText,
        splitterStyle,
        splitterContentPanelStyle,
        splitterSiderPanelStyle,
        siderTitleStyle,
        siderButtonContainerStyle,
        siderButtonStyle,
        upcomingEvents,
        selectedAppointment,
        handleCancelViewModal,
        handleToggleSider,
        handleHoverSider,
        handleLeaveSider,
        openCreateScheduledAppointmentModal,
    };
};

export default useAppointmentsUI;
