'use strict';

var jsxRuntime = require('react/jsx-runtime');
var react = require('react');
var reactDom = require('react-dom');
var calendar = require('@schedule-x/calendar');

const createCustomComponentFn = (setCustomComponent, customComponent) => (wrapperElement, props) => {
    setCustomComponent({
        Component: react.createElement(customComponent, props),
        wrapperElement,
    });
};
function ScheduleXCalendar({ calendarApp, customComponents }) {
    const [randomId, setRandomId] = react.useState('');
    const [customComponentsMeta, setCustomComponentsMeta] = react.useState([]);
    const setComponent = (component) => {
        setCustomComponentsMeta((prev) => {
            const newComponents = [...prev];
            const ccid = component.wrapperElement.dataset.ccid;
            const existingComponent = newComponents.find((c) => c.wrapperElement.dataset.ccid === ccid);
            if (existingComponent) {
                newComponents.splice(newComponents.indexOf(existingComponent), 1);
            }
            return [...newComponents, component];
        });
    };
    react.useEffect(() => {
        setRandomId('sx' + Math.random().toString(36).substring(2, 11));
    }, []);
    react.useEffect(() => {
        if (!calendarApp)
            return; // in SSR, calendarApp will be undefined
        for (const [componentName, Component] of Object.entries(customComponents || {})) {
            calendarApp._setCustomComponentFn(componentName, createCustomComponentFn(setComponent, Component));
        }
        const calendarElement = document.getElementById(randomId);
        if (!calendarElement)
            return;
        calendarApp.render(calendarElement);
    }, [calendarApp, customComponents, randomId]);
    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(react.Fragment, { children: [jsxRuntime.jsx("div", { className: "sx-react-calendar-wrapper", id: randomId }), customComponentsMeta.map(({ Component, wrapperElement }) => {
                    return reactDom.createPortal(Component, wrapperElement);
                })] }) }));
}

function useCalendarApp(config, plugins) {
    const [calendarApp] = react.useState(() => calendar.createCalendar(config, plugins));
    return calendarApp;
}
function useNextCalendarApp(config, plugins) {
    const [calendarApp, setCalendarApp] = react.useState();
    react.useEffect(() => {
        if (typeof window !== 'undefined') {
            setCalendarApp(calendar.createCalendar(config, plugins));
        }
    }, []);
    return calendarApp;
}

exports.ScheduleXCalendar = ScheduleXCalendar;
exports.useCalendarApp = useCalendarApp;
exports.useNextCalendarApp = useNextCalendarApp;