"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.DateRangeFormControl = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = tslib_1.__importDefault(require("react"));
const core_1 = require("@material-ui/core");
const Menu_1 = tslib_1.__importDefault(require("@material-ui/core/Menu"));
const react_datepicker_1 = tslib_1.__importDefault(require("react-datepicker"));
const date_fns_1 = require("date-fns");
const TextEntryFormControl_1 = require("../TextEntryFormControl");
const FormDesignConstants_1 = require("../../Utilities/FormDesignConstants");
const CommonStyled_1 = require("./CommonStyled");
const DateDataDefinition_1 = require("@appglue/common/dist/Common/Data/Definitions/DateDataDefinition");
require("react-datepicker/dist/react-datepicker.css");
const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
const UIHorizontalSplit_1 = require("../../../CommonUI/BuildlingBlocks/UIHorizontalSplit");
const PropertyEditorSelect_1 = require("../../../CommonUI/PropertyEditing/PropertyEditorSelect");
const PropertyEditorBoolean_1 = require("../../../CommonUI/PropertyEditing/PropertyEditorBoolean");
const DataUtilities_1 = require("@appglue/common/dist/Common/DataUtilities");
class XDateRangeEditUI extends react_1.default.Component {
    render() {
        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [this.props.editMe.renderBaseDataControlEditor(), (0, jsx_runtime_1.jsx)(PropertyEditorSelect_1.PropertyEditorSelect, { editObject: this.props.editMe, propertyName: "type", label: "Type", updateCallback: this.props.editMe.controlUpdate, options: ["past", "future", "both"] }), (0, jsx_runtime_1.jsx)(PropertyEditorBoolean_1.PropertyEditorBoolean, { editObject: this.props.editMe, propertyName: "showRange", label: "Show Range", updateCallback: this.props.editMe.controlUpdate }), this.props.editMe.renderTextControlBasePropertyEditor(), this.props.editMe.renderTextStyleSelectionEditor()] }));
    }
}
class DateRangeFormControl extends TextEntryFormControl_1.TextEntryFormControl {
    __type = "Date Range Picker";
    type = "both";
    showRange = true;
    render() {
        return (0, jsx_runtime_1.jsx)(XDateRangeUI, { me: this });
    }
    getValue = () => {
        if (this.valueName) {
            return this.getFormDataValue(this.valueName);
        }
    };
    setValue = (newValue) => {
        if (!this.valueName)
            return;
        const value = this.getValue();
        if (value) {
            this.setFormDataValue(this.valueName, { ...value, ...newValue });
        }
        else {
            this.setFormDataValue(this.valueName, newValue);
        }
    };
    renderEditUI() {
        return (0, jsx_runtime_1.jsx)(XDateRangeEditUI, { editMe: this });
    }
    getAddedData() {
        if (!this.valueName)
            return;
        let def = new DateDataDefinition_1.DateDataDefinition();
        def.name = this.valueName;
        return def;
    }
    getFormatedValue = () => {
        if (!this.valueName)
            return "";
        let dates = [];
        const { startDate, endDate } = this.getValue() || {};
        if (startDate) {
            dates.push(startDate);
        }
        if (endDate) {
            dates.push(endDate);
        }
        return dates.join(" - ");
    };
    getStorageData() {
        let retData = super.getStorageData();
        retData = DataUtilities_1.DataUtilities.addStorageData(this, retData, "__type", "readonly", "type", "showRange");
        return retData;
    }
    setStorageData(data) {
        super.setStorageData(data);
        DataUtilities_1.DataUtilities.setStorageData(this, data, "__type", "readonly", "type", "showRange");
    }
}
exports.DateRangeFormControl = DateRangeFormControl;
const staticPeriods = ["week", "month", "year", "7 days", "30 days"];
const XDateRangeUI = (props) => {
    const [anchorEl, setAnchorEl] = react_1.default.useState(null);
    const [staticPeriod, setStaticPeriod] = react_1.default.useState("this");
    let style = props.me.getFormContext()?.form?.defaultTextStyle;
    if (props.me.overrideStyle && props.me.style)
        style = props.me.style;
    let size = props.me.getFormContext()?.form?.defaultTextSize ?? "medium";
    if (props.me.overrideStyle && props.me.size)
        size = props.me.size;
    const issueData = props.me.getFormContext().getControlContext(props.me).getRuntimeIssueData();
    const issueText = issueData?.text;
    const customWidth = props.me.fullWidth ? "100%" : props.me.width ? `${props.me.width}px` : "200px";
    const formatDate = (date, idx) => {
        if (Array.isArray(date)) {
            if (date[idx]) {
                return (0, date_fns_1.format)(date[idx], "MM/dd/yyyy");
            }
            return;
        }
        if (date) {
            return (0, date_fns_1.format)(date, "MM/dd/yyyy");
        }
        return;
    };
    let { startDate: s, endDate: d } = props.me.getValue() || {};
    const startDate = s ? (0, date_fns_1.parse)(s, "MM/dd/yyyy", new Date()) : undefined;
    const endDate = d ? (0, date_fns_1.parse)(d, "MM/dd/yyyy", new Date()) : undefined;
    const onFocus = (event) => {
        setAnchorEl(event.currentTarget);
    };
    const onSetStaticPeriod = (type) => {
        // let startDate: string | undefined;
        // let endDate: string | undefined;
        if (staticPeriod === "this") {
            switch (type) {
                case "week":
                    props.me.setValue({
                        startDate: formatDate((0, date_fns_1.startOfWeek)(new Date()), 0),
                        endDate: formatDate((0, date_fns_1.endOfWeek)(new Date()), 0),
                    });
                    break;
                case "month":
                    props.me.setValue({
                        startDate: formatDate((0, date_fns_1.startOfMonth)(new Date()), 0),
                        endDate: formatDate((0, date_fns_1.endOfMonth)(new Date()), 0),
                    });
                    break;
                case "year":
                    props.me.setValue({
                        startDate: formatDate((0, date_fns_1.startOfYear)(new Date()), 0),
                        endDate: formatDate((0, date_fns_1.endOfYear)(new Date()), 0),
                    });
                    break;
            }
        }
        if (staticPeriod === "next") {
            let d;
            switch (type) {
                case "week":
                    d = (0, date_fns_1.addDays)(new Date(), 7);
                    props.me.setValue({
                        startDate: formatDate((0, date_fns_1.startOfWeek)(d), 0),
                        endDate: formatDate((0, date_fns_1.endOfWeek)(d), 0),
                    });
                    break;
                case "month":
                    d = (0, date_fns_1.addMonths)(new Date(), 1);
                    props.me.setValue({
                        startDate: formatDate((0, date_fns_1.startOfMonth)(d), 0),
                        endDate: formatDate((0, date_fns_1.endOfMonth)(d), 0),
                    });
                    break;
                case "year":
                    d = (0, date_fns_1.addYears)(new Date(), 1);
                    props.me.setValue({
                        startDate: formatDate((0, date_fns_1.startOfYear)(d), 0),
                        endDate: formatDate((0, date_fns_1.endOfYear)(d), 0),
                    });
                    break;
                case "7 days":
                    props.me.setValue({
                        startDate: formatDate(new Date(), 0),
                        endDate: formatDate((0, date_fns_1.addDays)(new Date(), 7), 0),
                    });
                    break;
                case "30 days":
                    props.me.setValue({
                        startDate: formatDate(new Date(), 0),
                        endDate: formatDate((0, date_fns_1.addDays)(new Date(), 30), 0),
                    });
                    break;
            }
        }
        if (staticPeriod === "last") {
            let d;
            switch (type) {
                case "week":
                    d = (0, date_fns_1.subDays)(new Date(), 7);
                    props.me.setValue({
                        startDate: formatDate((0, date_fns_1.startOfWeek)(d), 0),
                        endDate: formatDate((0, date_fns_1.endOfWeek)(d), 0),
                    });
                    break;
                case "month":
                    d = (0, date_fns_1.subMonths)(new Date(), 1);
                    props.me.setValue({
                        startDate: formatDate((0, date_fns_1.startOfMonth)(d), 0),
                        endDate: formatDate((0, date_fns_1.endOfMonth)(d), 0),
                    });
                    break;
                case "year":
                    d = (0, date_fns_1.subYears)(new Date(), 1);
                    props.me.setValue({
                        startDate: formatDate((0, date_fns_1.startOfYear)(d), 0),
                        endDate: formatDate((0, date_fns_1.endOfYear)(d), 0),
                    });
                    break;
                case "7 days":
                    props.me.setValue({
                        startDate: formatDate((0, date_fns_1.subDays)(new Date(), 7), 0),
                        endDate: formatDate(new Date(), 0),
                    });
                    break;
                case "30 days":
                    props.me.setValue({
                        startDate: formatDate((0, date_fns_1.subDays)(new Date(), 30), 0),
                        endDate: formatDate(new Date(), 0),
                    });
                    break;
            }
        }
    };
    let content = null;
    switch (style) {
        case FormDesignConstants_1.TextControlStyle.LABELED:
            content = ((0, jsx_runtime_1.jsxs)("form", { noValidate: true, children: [props.me.label && (0, jsx_runtime_1.jsx)(CommonStyled_1.StyledInputLabel, { children: props.me.label }), (0, jsx_runtime_1.jsx)(CommonStyled_1.StyledTextField, { size: size, "data-size": size, variant: "outlined", fullWidth: props.me.fullWidth, value: props.me.getFormatedValue(), onChange: () => { }, "data-testid": `XDateRange-${props.me.valueName}-input`, width: customWidth, error: Boolean(issueText), InputProps: {
                            onFocus,
                            readOnly: true,
                            inputRef: props.me.ref,
                        } }), issueText && issueText.length > 30 && ((0, jsx_runtime_1.jsx)(core_1.Tooltip, { title: issueText, arrow: true, placement: "bottom", children: (0, jsx_runtime_1.jsx)(CommonStyled_1.StyledFormHelperText, { error: Boolean(issueText), "data-testid": `${props.me.valueName || "datepicker"}-hinttext`, children: issueText.slice(0, 30) + "..." }) })), ((issueText && issueText.length < 31) || props.me.hintText) && ((0, jsx_runtime_1.jsx)(CommonStyled_1.StyledFormHelperText, { error: Boolean(issueText), "data-testid": `${props.me.valueName || "datepicker"}-hinttext`, children: issueText ? issueText : props.me.hintText }))] }));
            break;
        case FormDesignConstants_1.TextControlStyle.SHADED:
            content = ((0, jsx_runtime_1.jsxs)("form", { noValidate: true, children: [(0, jsx_runtime_1.jsx)(CommonStyled_1.StyledTextField, { size: size, "data-size": size, variant: "filled", customstyle: "filled", fullWidth: props.me.fullWidth, value: props.me.getFormatedValue(), onChange: () => { }, "data-testid": `XDateRange-${props.me.valueName}-input`, width: customWidth, error: Boolean(issueText), label: props.me.label, InputProps: {
                            onFocus,
                            readOnly: true,
                            inputRef: props.me.ref,
                        } }), issueText && issueText.length > 30 && ((0, jsx_runtime_1.jsx)(core_1.Tooltip, { title: issueText, arrow: true, placement: "bottom", children: (0, jsx_runtime_1.jsx)(CommonStyled_1.StyledFormHelperText, { error: Boolean(issueText), "data-testid": `${props.me.valueName || "datepicker"}-hinttext`, children: issueText.slice(0, 30) + "..." }) })), ((issueText && issueText.length < 31) || props.me.hintText) && ((0, jsx_runtime_1.jsx)(CommonStyled_1.StyledFormHelperText, { error: Boolean(issueText), "data-testid": `${props.me.valueName || "datepicker"}-hinttext`, children: issueText ? issueText : props.me.hintText }))] }));
            break;
        case FormDesignConstants_1.TextControlStyle.UNDERLINED:
            content = ((0, jsx_runtime_1.jsxs)("form", { noValidate: true, children: [(0, jsx_runtime_1.jsx)(CommonStyled_1.StyledTextField, { size: size, "data-size": size, variant: "standard", customstyle: "standard", fullWidth: props.me.fullWidth, value: props.me.getFormatedValue(), onChange: () => { }, "data-testid": `XDateRange-${props.me.valueName}-input`, width: customWidth, error: Boolean(issueText), label: props.me.label, InputProps: {
                            onFocus,
                            readOnly: true,
                            inputRef: props.me.ref,
                        } }), issueText && issueText.length > 30 && ((0, jsx_runtime_1.jsx)(core_1.Tooltip, { title: issueText, arrow: true, placement: "bottom", children: (0, jsx_runtime_1.jsx)(CommonStyled_1.StyledFormHelperText, { error: Boolean(issueText), "data-testid": `${props.me.valueName || "datepicker"}-hinttext`, children: issueText.slice(0, 30) + "..." }) })), ((issueText && issueText.length < 31) || props.me.hintText) && ((0, jsx_runtime_1.jsx)(CommonStyled_1.StyledFormHelperText, { error: Boolean(issueText), "data-testid": `${props.me.valueName || "datepicker"}-hinttext`, children: issueText ? issueText : props.me.hintText }))] }));
            break;
        case FormDesignConstants_1.TextControlStyle.OUTLINE:
            content = ((0, jsx_runtime_1.jsxs)("form", { noValidate: true, children: [(0, jsx_runtime_1.jsx)(CommonStyled_1.StyledTextField, { size: size, "data-size": size, variant: "outlined", customstyle: "outlined", fullWidth: props.me.fullWidth, value: props.me.getFormatedValue(), onChange: () => { }, "data-testid": `XDateRange-${props.me.valueName}-input`, width: customWidth, error: Boolean(issueText), label: props.me.label, InputProps: {
                            onFocus,
                            readOnly: true,
                            inputRef: props.me.ref,
                        } }), issueText && issueText.length > 30 && ((0, jsx_runtime_1.jsx)(core_1.Tooltip, { title: issueText, arrow: true, placement: "bottom", children: (0, jsx_runtime_1.jsx)(CommonStyled_1.StyledFormHelperText, { error: Boolean(issueText), "data-testid": `${props.me.valueName || "datepicker"}-hinttext`, children: issueText.slice(0, 30) + "..." }) })), ((issueText && issueText.length < 31) || props.me.hintText) && ((0, jsx_runtime_1.jsx)(CommonStyled_1.StyledFormHelperText, { error: Boolean(issueText), "data-testid": `${props.me.valueName || "datepicker"}-hinttext`, children: issueText ? issueText : props.me.hintText }))] }));
            break;
    }
    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [content, (0, jsx_runtime_1.jsx)(Menu_1.default, { anchorEl: anchorEl, keepMounted: true, getContentAnchorEl: null, open: Boolean(anchorEl), onClose: () => {
                    setAnchorEl(null);
                }, disableEnforceFocus: true, disableRestoreFocus: true, "data-testid": `${props.me.valueName}-dateSelectorLayer`, children: (0, jsx_runtime_1.jsxs)(StyledLayer, { showRange: props.me.showRange, children: [(0, jsx_runtime_1.jsx)(react_datepicker_1.default, { onChange: (date) => {
                                props.me.setValue({ startDate: formatDate(date, 0) });
                            }, selectsStart: true, startDate: startDate, endDate: endDate, open: true, shouldCloseOnSelect: false, popperClassName: "XDateRange-popper", wrapperClassName: "XDateRange-wrapper", minDate: props.me.type === "future" ? new Date() : undefined, maxDate: props.me.type === "past" ? new Date() : undefined, "data-testid": `XDateRange-${props.me.valueName}-start` }), (0, jsx_runtime_1.jsx)(react_datepicker_1.default, { selected: endDate, onChange: (date) => {
                                props.me.setValue({ endDate: formatDate(date, 1) });
                            }, selectsEnd: true, open: true, startDate: startDate, endDate: endDate, minDate: startDate, shouldCloseOnSelect: false, popperClassName: "XDateRange-popper", wrapperClassName: "XDateRange-wrapper", maxDate: props.me.type === "past" ? new Date() : undefined, "data-testid": `XDateRange-${props.me.valueName}-end` }), (0, jsx_runtime_1.jsxs)(StaticPicker, { children: [(0, jsx_runtime_1.jsx)(StaticPickerItem, { onClick: () => {
                                        props.me.setValue({
                                            startDate: formatDate(new Date(), 0),
                                            endDate: formatDate(new Date(), 1),
                                        });
                                    }, "data-testid": `XDateRange-${props.me.valueName}-today`, children: "Today" }), (0, jsx_runtime_1.jsx)(StaticPickerItem, { onClick: () => {
                                        props.me.setValue({
                                            startDate: formatDate((0, date_fns_1.subDays)(new Date(), 1), 0),
                                            endDate: formatDate((0, date_fns_1.subDays)(new Date(), 1), 1),
                                        });
                                    }, "data-testid": `XDateRange-${props.me.valueName}-yesterday`, children: "Yesterday" }), (0, jsx_runtime_1.jsx)(UIHorizontalSplit_1.UIHorizontalSplit, { marginTop: 16, marginBottom: 16 }), (0, jsx_runtime_1.jsxs)(StaticPeriod, { children: [(0, jsx_runtime_1.jsxs)(StaticPeriodButtons, { children: [(0, jsx_runtime_1.jsx)(TabButton, { selected: staticPeriod === "last", onClick: () => {
                                                        setStaticPeriod("last");
                                                    }, "data-testid": `XDateRange-${props.me.valueName}-lastPeriod`, children: "Last" }), (0, jsx_runtime_1.jsx)(TabButton, { selected: staticPeriod === "this", onClick: () => {
                                                        setStaticPeriod("this");
                                                    }, "data-testid": `XDateRange-${props.me.valueName}-thisPeriod`, children: "This" }), (0, jsx_runtime_1.jsx)(TabButton, { selected: staticPeriod === "next", onClick: () => {
                                                        setStaticPeriod("next");
                                                    }, "data-testid": `XDateRange-${props.me.valueName}-nextPeriod`, children: "Next" })] }), staticPeriods.map((s, idx) => {
                                            if (staticPeriod === "this" && ["7 days", "30 days"].includes(s)) {
                                                return null;
                                            }
                                            return ((0, jsx_runtime_1.jsx)(StaticPickerItem, { onClick: () => onSetStaticPeriod(s), children: s }, idx));
                                        })] })] })] }) })] }));
};
const StyledLayer = styled_components_1.default.div `
    display: flex;

    background: #ffffff;
    box-sizing: border-box;

    > * {
        margin-left: 20px;
    }

    .XDateRange-popper {
        position: static !important;
        transform: none !important;

        .react-datepicker {
            border: none;
            border-radius: 0;

            font-style: normal;
            font-size: 14px;
            line-height: 140%;

            .react-datepicker__triangle {
                display: none;
            }

            .react-datepicker__header {
                background: #fff;
                margin-bottom: 8px;

                border: none;

                .react-datepicker__day-name {
                    font-size: 12px;
                    font-style: normal;
                    font-weight: 500;
                    line-height: 35px;

                    letter-spacing: 0px;
                    text-align: center;

                    color: rgba(64, 80, 166, 0.5);

                    width: 35px;
                }
            }

            .react-datepicker__current-month {
                font-size: 14px;
                font-weight: 600;
                color: #272932;
                margin-bottom: 8px;
            }

            .react-datepicker__day {
                font-size: 14px;
                font-style: normal;
                font-weight: 400;
                line-height: 35px;
                letter-spacing: 0em;
                text-align: center;
                color: #272932;

                width: 35px;

                border-radius: 50%;

                &.react-datepicker__day--range-start,
                &.react-datepicker__day--range-end {
                    color: #fff !important;
                    background: #4050a6 !important;
                }

                &.react-datepicker__day--in-range {
                    ${(props) => props.showRange
    ? `
                                background: rgba(64, 80, 166, 0.1);
                                color: #272932;
                            `
    : `
                                color: #272932;
                                background: #fff;
                            `}
                }
            }
        }
    }

    .XDateRange-wrapper {
        display: none;
    }
`;
const StaticPicker = styled_components_1.default.div `
    border-left: solid 1px rgba(39, 41, 50, 0.1);
    padding: 32px;
    display: flex;
    justify-content: center;
    flex-direction: column;
`;
const StaticPickerItem = styled_components_1.default.div `
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 17px;
    letter-spacing: 0em;
    text-align: left;

    cursor: pointer;

    padding: 4px 0;

    &:hover {
        color: #4050a6;
    }
`;
const StaticPeriod = styled_components_1.default.div `
    display: flex;
    flex-direction: column;
    justify-content: center;
`;
const TabButton = styled_components_1.default.div `
    cursor: pointer;
    //styleName: text/Inter Medium 12px;

    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 17px;
    letter-spacing: 0px;
    text-align: center;
    padding-bottom: 2px;

    ${(props) => props.selected
    ? `
        color: #272932;
        border-bottom: solid 1px #4050A6;
    `
    : `
        color: rgba(39, 41, 50, 0.5);
        border-bottom: solid 1px translate;
    `}
`;
const StaticPeriodButtons = styled_components_1.default.div `
    display: flex;

    margin-bottom: 12px;

    > div {
        margin-left: 12px;

        &:first-child {
            margin-left: 0;
        }
    }
`;
//# sourceMappingURL=DateRangeFormControl.js.map