import React, { useState } from "react";
import TimeRange from "../../../Types/Time/TimeRange";
import OneUptimeDate from "../../../Types/Date";
import IconProp from "../../../Types/Icon/IconProp";
import Icon from "../Icon/Icon";
import Tooltip from "../Tooltip/Tooltip";
import RangeStartAndEndDateEdit from "./RangeStartAndEndDateEdit";
import Modal from "../Modal/Modal";
const DashboardStartAndEndDateView = (props) => {
    const [tempStartAndEndDate, setTempStartAndEndDate] = useState(null);
    const [showTimeSelectModal, setShowTimeSelectModal] = useState(false);
    const isCustomRange = props.dashboardStartAndEndDate.range === TimeRange.CUSTOM;
    const getContent = () => {
        var _a, _b;
        const title = isCustomRange
            ? `${OneUptimeDate.getDateAsUserFriendlyLocalFormattedString(((_a = props.dashboardStartAndEndDate.startAndEndDate) === null || _a === void 0 ? void 0 : _a.startValue) ||
                OneUptimeDate.getCurrentDate())} - ${OneUptimeDate.getDateAsUserFriendlyLocalFormattedString(((_b = props.dashboardStartAndEndDate.startAndEndDate) === null || _b === void 0 ? void 0 : _b.endValue) ||
                OneUptimeDate.getCurrentDate())}`
            : props.dashboardStartAndEndDate.range;
        return (React.createElement("div", null,
            React.createElement(Tooltip, { text: "Click to change the date and time range of data on this dashboard." },
                React.createElement("button", { type: "button", className: "flex items-center gap-1.5 rounded-lg px-2.5 py-1.5 transition-colors cursor-pointer border bg-gray-50 border-gray-200/60 hover:bg-gray-100", onClick: () => {
                        setTempStartAndEndDate(props.dashboardStartAndEndDate);
                        setShowTimeSelectModal(true);
                    } },
                    React.createElement(Icon, { icon: IconProp.Clock, className: "w-3.5 h-3.5 text-gray-500" }),
                    React.createElement("span", { className: "text-xs text-gray-500" }, title))),
            showTimeSelectModal && (React.createElement(Modal, { title: "Select Start and End Time", onClose: () => {
                    setTempStartAndEndDate(null);
                    setShowTimeSelectModal(false);
                }, onSubmit: () => {
                    if (tempStartAndEndDate) {
                        props.onChange(tempStartAndEndDate);
                    }
                    setShowTimeSelectModal(false);
                    setTempStartAndEndDate(null);
                } },
                React.createElement("div", { className: "mt-5" },
                    React.createElement(RangeStartAndEndDateEdit, { value: tempStartAndEndDate || undefined, onChange: (startAndEndDate) => {
                            setTempStartAndEndDate(startAndEndDate);
                        } }))))));
    };
    return React.createElement("div", null, getContent());
};
export default DashboardStartAndEndDateView;
//# sourceMappingURL=RangeStartAndEndDateView.js.map