import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import React from "react";
import { Tooltip } from "@material-ui/core";
import Menu from "@material-ui/core/Menu";
import DatePicker from "react-datepicker";
import { format, parse, startOfWeek, endOfWeek, startOfMonth, endOfMonth, startOfYear, endOfYear, subDays, subMonths, subYears, addDays, addMonths, addYears, } from "date-fns";
import { BaseTextEntryControl } from "./BaseTextEntryControl";
import { TextControlStyle } from "../FormDesignConstants";
import { StyledInputLabel, StyledFormHelperText } from "./XCommonStyled";
import { StyledTextField } from "./XCommonStyled";
import { DateDataDefinition } from "../../Common/Data/Definitions/DateDataDefinition";
import "react-datepicker/dist/react-datepicker.css";
import styled from "styled-components";
import { HorizontalSplit } from "../../CommonUI/Components/HorizontalSplit";
import { PropertyEditorSelect } from "../../CommonUI/PropertyEditing/PropertyEditorSelect";
import { PropertyEditorBoolean } from "../../CommonUI/PropertyEditing/PropertyEditorBoolean";
class XDateRangeEditUI extends React.Component {
    render() {
        return (_jsxs(_Fragment, { children: [this.props.editMe.renderBaseDataControlEditor(), _jsx(PropertyEditorSelect, { editObject: this.props.editMe, propertyName: "type", label: "Type", updateCallback: this.props.editMe.controlUpdate, options: ["past", "future", "both"] }, void 0),
                _jsx(PropertyEditorBoolean, { editObject: this.props.editMe, propertyName: "showRange", label: "Show Range", updateCallback: this.props.editMe.controlUpdate }, void 0), this.props.editMe.renderTextControlBasePropertyEditor(), this.props.editMe.renderTextStyleSelectionEditor()] }, void 0));
    }
}
export class XDateRange extends BaseTextEntryControl {
    constructor() {
        super(...arguments);
        this.type = "both";
        this.showRange = true;
        this.getValue = () => {
            if (this.valueName) {
                return this.getFormDataValue(this.valueName);
            }
        };
        this.setValue = (newValue) => {
            if (!this.valueName)
                return;
            const value = this.getValue();
            if (value) {
                this.setFormDataValue(this.valueName, Object.assign(Object.assign({}, value), newValue));
            }
            else {
                this.setFormDataValue(this.valueName, newValue);
            }
        };
        this.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(" - ");
        };
    }
    render() {
        return _jsx(XDateRangeUI, { me: this }, void 0);
    }
    renderEditUI() {
        return _jsx(XDateRangeEditUI, { editMe: this }, void 0);
    }
    getAddedData() {
        if (!this.valueName)
            return;
        let def = new DateDataDefinition();
        def.name = this.valueName;
        return def;
    }
}
const staticPeriods = ["week", "month", "year", "7 days", "30 days"];
const XDateRangeUI = (props) => {
    var _a, _b, _c, _d, _e;
    const [anchorEl, setAnchorEl] = React.useState(null);
    const [staticPeriod, setStaticPeriod] = React.useState("this");
    let style = (_b = (_a = props.me.getFormContext()) === null || _a === void 0 ? void 0 : _a.form) === null || _b === void 0 ? void 0 : _b.defaultTextStyle;
    if (props.me.overrideStyle && props.me.style)
        style = props.me.style;
    let size = (_e = (_d = (_c = props.me.getFormContext()) === null || _c === void 0 ? void 0 : _c.form) === null || _d === void 0 ? void 0 : _d.defaultTextSize) !== null && _e !== void 0 ? _e : "medium";
    if (props.me.overrideStyle && props.me.size)
        size = props.me.size;
    const issueData = props.me.getFormContext().getControlContext(props.me).getRuntimeIssueData();
    const issueText = issueData === null || issueData === void 0 ? void 0 : 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 format(date[idx], "MM/dd/yyyy");
            }
            return;
        }
        if (date) {
            return format(date, "MM/dd/yyyy");
        }
        return;
    };
    let { startDate: s, endDate: d } = props.me.getValue() || {};
    const startDate = s ? parse(s, "MM/dd/yyyy", new Date()) : undefined;
    const endDate = d ? 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(startOfWeek(new Date()), 0),
                        endDate: formatDate(endOfWeek(new Date()), 0),
                    });
                    break;
                case "month":
                    props.me.setValue({
                        startDate: formatDate(startOfMonth(new Date()), 0),
                        endDate: formatDate(endOfMonth(new Date()), 0),
                    });
                    break;
                case "year":
                    props.me.setValue({
                        startDate: formatDate(startOfYear(new Date()), 0),
                        endDate: formatDate(endOfYear(new Date()), 0),
                    });
                    break;
            }
        }
        if (staticPeriod === "next") {
            let d;
            switch (type) {
                case "week":
                    d = addDays(new Date(), 7);
                    props.me.setValue({
                        startDate: formatDate(startOfWeek(d), 0),
                        endDate: formatDate(endOfWeek(d), 0),
                    });
                    break;
                case "month":
                    d = addMonths(new Date(), 1);
                    props.me.setValue({
                        startDate: formatDate(startOfMonth(d), 0),
                        endDate: formatDate(endOfMonth(d), 0),
                    });
                    break;
                case "year":
                    d = addYears(new Date(), 1);
                    props.me.setValue({
                        startDate: formatDate(startOfYear(d), 0),
                        endDate: formatDate(endOfYear(d), 0),
                    });
                    break;
                case "7 days":
                    props.me.setValue({
                        startDate: formatDate(new Date(), 0),
                        endDate: formatDate(addDays(new Date(), 7), 0),
                    });
                    break;
                case "30 days":
                    props.me.setValue({
                        startDate: formatDate(new Date(), 0),
                        endDate: formatDate(addDays(new Date(), 30), 0),
                    });
                    break;
            }
        }
        if (staticPeriod === "last") {
            let d;
            switch (type) {
                case "week":
                    d = subDays(new Date(), 7);
                    props.me.setValue({
                        startDate: formatDate(startOfWeek(d), 0),
                        endDate: formatDate(endOfWeek(d), 0),
                    });
                    break;
                case "month":
                    d = subMonths(new Date(), 1);
                    props.me.setValue({
                        startDate: formatDate(startOfMonth(d), 0),
                        endDate: formatDate(endOfMonth(d), 0),
                    });
                    break;
                case "year":
                    d = subYears(new Date(), 1);
                    props.me.setValue({
                        startDate: formatDate(startOfYear(d), 0),
                        endDate: formatDate(endOfYear(d), 0),
                    });
                    break;
                case "7 days":
                    props.me.setValue({
                        startDate: formatDate(subDays(new Date(), 7), 0),
                        endDate: formatDate(new Date(), 0),
                    });
                    break;
                case "30 days":
                    props.me.setValue({
                        startDate: formatDate(subDays(new Date(), 30), 0),
                        endDate: formatDate(new Date(), 0),
                    });
                    break;
            }
        }
    };
    let content = null;
    switch (style) {
        case TextControlStyle.LABELED:
            content = (_jsxs("form", Object.assign({ noValidate: true }, { children: [props.me.label && _jsx(StyledInputLabel, { children: props.me.label }, void 0),
                    _jsx(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
                        } }, void 0),
                    issueText && issueText.length > 30 && (_jsx(Tooltip, Object.assign({ title: issueText, arrow: true, placement: "bottom" }, { children: _jsx(StyledFormHelperText, Object.assign({ error: Boolean(issueText), "data-testid": `${props.me.valueName || "datepicker"}-hinttext` }, { children: issueText.slice(0, 30) + "..." }), void 0) }), void 0)),
                    ((issueText && issueText.length < 31) || props.me.hintText) && (_jsx(StyledFormHelperText, Object.assign({ error: Boolean(issueText), "data-testid": `${props.me.valueName || "datepicker"}-hinttext` }, { children: issueText ? issueText : props.me.hintText }), void 0))] }), void 0));
            break;
        case TextControlStyle.SHADED:
            content = (_jsxs("form", Object.assign({ noValidate: true }, { children: [_jsx(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
                        } }, void 0),
                    issueText && issueText.length > 30 && (_jsx(Tooltip, Object.assign({ title: issueText, arrow: true, placement: "bottom" }, { children: _jsx(StyledFormHelperText, Object.assign({ error: Boolean(issueText), "data-testid": `${props.me.valueName || "datepicker"}-hinttext` }, { children: issueText.slice(0, 30) + "..." }), void 0) }), void 0)),
                    ((issueText && issueText.length < 31) || props.me.hintText) && (_jsx(StyledFormHelperText, Object.assign({ error: Boolean(issueText), "data-testid": `${props.me.valueName || "datepicker"}-hinttext` }, { children: issueText ? issueText : props.me.hintText }), void 0))] }), void 0));
            break;
        case TextControlStyle.UNDERLINED:
            content = (_jsxs("form", Object.assign({ noValidate: true }, { children: [_jsx(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
                        } }, void 0),
                    issueText && issueText.length > 30 && (_jsx(Tooltip, Object.assign({ title: issueText, arrow: true, placement: "bottom" }, { children: _jsx(StyledFormHelperText, Object.assign({ error: Boolean(issueText), "data-testid": `${props.me.valueName || "datepicker"}-hinttext` }, { children: issueText.slice(0, 30) + "..." }), void 0) }), void 0)),
                    ((issueText && issueText.length < 31) || props.me.hintText) && (_jsx(StyledFormHelperText, Object.assign({ error: Boolean(issueText), "data-testid": `${props.me.valueName || "datepicker"}-hinttext` }, { children: issueText ? issueText : props.me.hintText }), void 0))] }), void 0));
            break;
        case TextControlStyle.OUTLINE:
            content = (_jsxs("form", Object.assign({ noValidate: true }, { children: [_jsx(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
                        } }, void 0),
                    issueText && issueText.length > 30 && (_jsx(Tooltip, Object.assign({ title: issueText, arrow: true, placement: "bottom" }, { children: _jsx(StyledFormHelperText, Object.assign({ error: Boolean(issueText), "data-testid": `${props.me.valueName || "datepicker"}-hinttext` }, { children: issueText.slice(0, 30) + "..." }), void 0) }), void 0)),
                    ((issueText && issueText.length < 31) || props.me.hintText) && (_jsx(StyledFormHelperText, Object.assign({ error: Boolean(issueText), "data-testid": `${props.me.valueName || "datepicker"}-hinttext` }, { children: issueText ? issueText : props.me.hintText }), void 0))] }), void 0));
            break;
    }
    return (_jsxs(_Fragment, { children: [content, _jsx(Menu, Object.assign({ anchorEl: anchorEl, keepMounted: true, getContentAnchorEl: null, open: Boolean(anchorEl), onClose: () => {
                    setAnchorEl(null);
                }, disableEnforceFocus: true, disableRestoreFocus: true, "data-testid": `${props.me.valueName}-dateSelectorLayer` }, { children: _jsxs(StyledLayer, Object.assign({ showRange: props.me.showRange }, { children: [_jsx(DatePicker, { 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` }, void 0),
                        _jsx(DatePicker, { 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` }, void 0),
                        _jsxs(StaticPicker, { children: [_jsx(StaticPickerItem, Object.assign({ onClick: () => {
                                        props.me.setValue({
                                            startDate: formatDate(new Date(), 0),
                                            endDate: formatDate(new Date(), 1),
                                        });
                                    }, "data-testid": `XDateRange-${props.me.valueName}-today` }, { children: "Today" }), void 0),
                                _jsx(StaticPickerItem, Object.assign({ onClick: () => {
                                        props.me.setValue({
                                            startDate: formatDate(subDays(new Date(), 1), 0),
                                            endDate: formatDate(subDays(new Date(), 1), 1),
                                        });
                                    }, "data-testid": `XDateRange-${props.me.valueName}-yesterday` }, { children: "Yesterday" }), void 0),
                                _jsx(HorizontalSplit, { marginTop: 16, marginBottom: 16 }, void 0),
                                _jsxs(StaticPeriod, { children: [_jsxs(StaticPeriodButtons, { children: [_jsx(TabButton, Object.assign({ selected: staticPeriod === "last", onClick: () => {
                                                        setStaticPeriod("last");
                                                    }, "data-testid": `XDateRange-${props.me.valueName}-lastPeriod` }, { children: "Last" }), void 0),
                                                _jsx(TabButton, Object.assign({ selected: staticPeriod === "this", onClick: () => {
                                                        setStaticPeriod("this");
                                                    }, "data-testid": `XDateRange-${props.me.valueName}-thisPeriod` }, { children: "This" }), void 0),
                                                _jsx(TabButton, Object.assign({ selected: staticPeriod === "next", onClick: () => {
                                                        setStaticPeriod("next");
                                                    }, "data-testid": `XDateRange-${props.me.valueName}-nextPeriod` }, { children: "Next" }), void 0)] }, void 0),
                                        staticPeriods.map((s, idx) => {
                                            if (staticPeriod === "this" && ["7 days", "30 days"].includes(s)) {
                                                return null;
                                            }
                                            return (_jsx(StaticPickerItem, Object.assign({ onClick: () => onSetStaticPeriod(s) }, { children: s }), idx));
                                        })] }, void 0)] }, void 0)] }), void 0) }), void 0)] }, void 0));
};
const StyledLayer = styled.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-family: Inter;
            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-family: Inter;
                    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-family: Inter;
                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.div `
    border-left: solid 1px rgba(39, 41, 50, 0.1);
    padding: 32px;
    display: flex;
    justify-content: center;
    flex-direction: column;
`;
const StaticPickerItem = styled.div `
    font-family: Inter;
    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.div `
    display: flex;
    flex-direction: column;
    justify-content: center;
`;
const TabButton = styled.div `
    cursor: pointer;
    //styleName: text/Inter Medium 12px;
    font-family: Inter;
    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.div `
    display: flex;

    margin-bottom: 12px;

    > div {
        margin-left: 12px;
        &:first-child {
            margin-left: 0;
        }
    }
`;
//# sourceMappingURL=XDateRange.js.map