"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    var desc = Object.getOwnPropertyDescriptor(m, k);
    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
      desc = { enumerable: true, get: function() { return m[k]; } };
    }
    Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
    __setModuleDefault(result, mod);
    return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.DateRangePicker = void 0;
var react_1 = __importStar(require("react"));
var ui_i18n_1 = __importDefault(require("ui-i18n"));
var nanoid_1 = require("nanoid");
var ramda_1 = require("ramda");
var mdm_sdk_1 = require("@reltio/mdm-sdk");
var Button_1 = __importDefault(require("@mui/material/Button"));
var DialogTitle_1 = __importDefault(require("@mui/material/DialogTitle"));
var DialogContent_1 = __importDefault(require("@mui/material/DialogContent"));
var DialogActions_1 = __importDefault(require("@mui/material/DialogActions"));
var TimestampEditor_1 = require("../TimestampEditor");
var DateEditor_1 = require("../DateEditor");
var styles_1 = require("./styles");
var START_DATE = 0;
var END_DATE = 1;
var getDate = function (values, index) { return (0, ramda_1.pathOr)(null, [index], values); };
exports.DateRangePicker = (0, react_1.forwardRef)(function (_a, ref) {
    var onApply = _a.onApply, values = _a.values, type = _a.type, minDate = _a.minDate, maxDate = _a.maxDate;
    var styles = (0, styles_1.useStyles)();
    var editorFromId = (0, react_1.useRef)((0, nanoid_1.nanoid)());
    var editorToId = (0, react_1.useRef)((0, nanoid_1.nanoid)());
    var _b = (0, react_1.useState)(null), startDate = _b[0], setStartDate = _b[1];
    var _c = (0, react_1.useState)(null), endDate = _c[0], setEndDate = _c[1];
    react_1.default.useEffect(function () {
        setStartDate(getDate(values, START_DATE));
        setEndDate(getDate(values, END_DATE));
    }, [values]);
    var ComponentEditor = type === mdm_sdk_1.DataTypes.TYPE_TIMESTAMP ? TimestampEditor_1.TimestampEditor : DateEditor_1.DateEditor;
    var headerTitle = type === mdm_sdk_1.DataTypes.TYPE_TIMESTAMP ? ui_i18n_1.default.text('Pick date and time') : ui_i18n_1.default.text('Pick date');
    var selectStartDateHandler = function (value) {
        setStartDate(value);
    };
    var selectEndDateHandler = function (value) {
        setEndDate(value);
    };
    var onUpdate = function () {
        if (startDate && endDate && startDate > endDate) {
            onApply([endDate, startDate]);
        }
        else {
            onApply([startDate, endDate]);
        }
    };
    var onTabStopPropagation = function (e) { return e.key === 'Tab' && e.stopPropagation(); };
    return (react_1.default.createElement("div", { className: styles.container, ref: ref, onKeyDown: onTabStopPropagation },
        react_1.default.createElement(DialogTitle_1.default, null, headerTitle),
        react_1.default.createElement(DialogContent_1.default, { className: styles.dateRangeContainer },
            react_1.default.createElement(ComponentEditor, { slotProps: {
                    textField: {
                        id: editorFromId.current,
                        variant: 'filled',
                        size: 'small',
                        className: styles.dateInput
                    }
                }, label: ui_i18n_1.default.text('From'), value: startDate, onChange: selectStartDateHandler, minDate: minDate, maxDate: maxDate }),
            react_1.default.createElement(ComponentEditor, { slotProps: {
                    textField: {
                        id: editorToId.current,
                        variant: 'filled',
                        size: 'small',
                        className: styles.dateInput
                    }
                }, label: ui_i18n_1.default.text('To'), value: endDate, onChange: selectEndDateHandler, minDate: minDate, maxDate: maxDate })),
        react_1.default.createElement(DialogActions_1.default, null,
            react_1.default.createElement(Button_1.default, { color: "primary", onClick: onUpdate }, ui_i18n_1.default.text('Update')))));
});
exports.DateRangePicker.displayName = 'DateRangePicker';
