import { Blue500 } from "../../../Types/BrandColors";
import Color from "../../../Types/Color";
import OneUptimeDate from "../../../Types/Date";
import moment from "moment-timezone";
import React, { useMemo } from "react";
import { Calendar, momentLocalizer, } from "react-big-calendar";
import "react-big-calendar/lib/css/react-big-calendar.css";
import "./Calendar.css";
const localizer = momentLocalizer(moment);
export var DefaultCalendarView;
(function (DefaultCalendarView) {
    DefaultCalendarView["Month"] = "month";
    DefaultCalendarView["Week"] = "week";
    DefaultCalendarView["Day"] = "day";
    DefaultCalendarView["Agenda"] = "agenda";
})(DefaultCalendarView || (DefaultCalendarView = {}));
const CALENDAR_VIEWS = ["month", "week", "day", "agenda"];
const CalendarElement = (props) => {
    const { defaultDate } = useMemo(() => {
        return {
            defaultDate: OneUptimeDate.getCurrentDate(),
        };
    }, []);
    const eventStyleGetter = (event) => {
        var _a, _b;
        const backgroundColor = ((_a = event.color) === null || _a === void 0 ? void 0 : _a.toString()) || Blue500.toString();
        const computedTextColor = ((_b = event.textColor) === null || _b === void 0 ? void 0 : _b.toString()) ||
            (Color.shouldUseDarkText(new Color(backgroundColor))
                ? "#111827"
                : "#ffffff");
        const style = {
            backgroundColor,
            color: computedTextColor,
            borderRadius: "0.375rem",
            border: "0px",
            display: "block",
        };
        return {
            style,
        };
    };
    return (React.createElement("div", { id: props.id, className: "oneuptime-calendar mt-5 h-[42rem] rounded-xl bg-white" },
        React.createElement(Calendar, { defaultDate: defaultDate, events: props.events, localizer: localizer, showMultiDayTimes: true, views: CALENDAR_VIEWS, defaultView: props.defaultCalendarView || "week", eventPropGetter: eventStyleGetter, popup: true, onRangeChange: (range) => {
                if (Array.isArray(range)) {
                    return props.onRangeChange({
                        startTime: range[0],
                        endTime: OneUptimeDate.getEndOfDay(range[range.length - 1]),
                    });
                }
                props.onRangeChange({
                    startTime: range.start,
                    endTime: range.end,
                });
            } })));
};
export default CalendarElement;
//# sourceMappingURL=Calendar.js.map