"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.CustomDateRangeEditor = void 0;
var react_1 = __importStar(require("react"));
var moment_1 = __importDefault(require("moment"));
var ui_i18n_1 = __importDefault(require("ui-i18n"));
var ramda_1 = require("ramda");
var mdm_sdk_1 = require("@reltio/mdm-sdk");
var TextField_1 = __importDefault(require("@mui/material/TextField"));
var Popover_1 = __importDefault(require("@mui/material/Popover"));
var ReactSelectDropdownIndicatorWithIconButton_1 = require("../ReactSelectDropdownIndicatorWithIconButton");
var DateRangePicker_1 = require("../DateRangePicker");
var styles_1 = require("./styles");
var localeFormat = moment_1.default.localeData().longDateFormat('L');
var formatValue = function (value, placeholder) {
    return (0, ramda_1.isNil)(value)
        ? "".concat(placeholder)
        : "".concat((0, mdm_sdk_1.formatDataTypeValue)({ dataTypeDefinition: { type: mdm_sdk_1.DataTypes.TYPE_ACTIVENESS_DATE } }, value));
};
var CustomDateRangeEditor = function (_a) {
    var values = _a.values, onChange = _a.onChange, _b = _a.onFocus, onFocus = _b === void 0 ? ramda_1.identity : _b;
    var placeholder = localeFormat;
    var inputRef = (0, react_1.useRef)(null);
    var _c = (0, react_1.useState)(false), open = _c[0], setOpen = _c[1];
    var styles = (0, styles_1.useStyles)();
    var onApply = function (values) {
        onChange(values);
        setOpen(false);
    };
    var handleToggle = (0, react_1.useCallback)(function () {
        setOpen(function (open) { return !open; });
        onFocus();
    }, [onFocus]);
    var onCancel = function () {
        setOpen(false);
    };
    return (react_1.default.createElement("div", { "data-reltio-id": "custom-date-range-editor", className: styles.root },
        react_1.default.createElement(TextField_1.default, { fullWidth: true, value: values.map(function (value) { return formatValue(value, placeholder); }).join(' \u2014 '), onClick: handleToggle, variant: "filled", ref: inputRef, InputProps: {
                endAdornment: (react_1.default.createElement(ReactSelectDropdownIndicatorWithIconButton_1.ReactSelectDropdownIndicatorWithIconButton, { selectProps: { classes: styles, menuIsOpen: open }, innerProps: {} })),
                disableUnderline: (0, ramda_1.isNil)(values),
                readOnly: true,
                classes: {
                    root: styles.inputRoot,
                    input: styles.input
                }
            }, InputLabelProps: {
                shrink: false
            }, placeholder: ui_i18n_1.default.text("".concat(placeholder, " \u2014 ").concat(placeholder)) }),
        react_1.default.createElement(Popover_1.default, { open: open, anchorEl: inputRef.current, onClose: onCancel, anchorOrigin: {
                vertical: 'bottom',
                horizontal: 'right'
            }, transformOrigin: {
                vertical: 'top',
                horizontal: 'right'
            }, elevation: 2 },
            react_1.default.createElement(DateRangePicker_1.DateRangePicker, { values: values, onApply: onApply, type: mdm_sdk_1.DataTypes.TYPE_ACTIVENESS_DATE }))));
};
exports.CustomDateRangeEditor = CustomDateRangeEditor;
