import { createSlice } from '@reduxjs/toolkit';
import dayjs from "dayjs";

const initialState = {
    selectedDate: dayjs().toISOString(),
    modalVisible: false,
    collapsed: true,
    siderWidth: 300,
    hovered: false,
    selectedAppointment: null,
    selectedScheduledAppointment: null,
    scheduledModalVisible: false,
    scheduledData: null,
    appointmentsListModalVisible: false,
    selectedDateAppointments: [],
};

const appointmentsSlice = createSlice({
    name: 'appointmentsUI',
    initialState,
    reducers: {
        setSelectedDate(state, action) {
            state.selectedDate = action.payload;
        },
        openModal(state) {
            state.modalVisible = true;
        },
        closeModal(state) {
            state.modalVisible = false;
        },
        toggleSider(state) {
            state.collapsed = !state.collapsed;
        },
        setSiderWidth(state, action) {
            state.siderWidth = action.payload;
        },
        setHovered(state, action) {
            state.hovered = action.payload;
        },
        setSelectedAppointment(state, action) {
            state.selectedAppointment = action.payload;
        },
        setSelectedScheduledAppointment(state, action) {
            state.selectedScheduledAppointment = action.payload;
        },
        openScheduledModal(state) {
            state.scheduledModalVisible = true;
        },
        closeScheduledModal(state) {
            state.scheduledModalVisible = false;
        },
        openModalWithScheduledData(state, action) {
            state.modalVisible = true;
            state.scheduledData = action.payload;
        },
        openAppointmentsListModal(state, action) {
            state.appointmentsListModalVisible = true;
            state.selectedDateAppointments = action.payload;
        },
        closeAppointmentsListModal(state) {
            state.appointmentsListModalVisible = false;
            state.selectedDateAppointments = [];
        },
    },
});

export const {
    setSelectedDate,
    openModal,
    closeModal,
    toggleSider,
    setSiderWidth,
    setHovered,
    setSelectedAppointment,
    setSelectedScheduledAppointment,
    openScheduledModal,
    closeScheduledModal,
    openModalWithScheduledData,
    openAppointmentsListModal,
    closeAppointmentsListModal,
} = appointmentsSlice.actions;

export default appointmentsSlice.reducer;