"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.UIDatePicker = void 0;
const react_1 = __importDefault(require("react"));
const UIInput_1 = require("../UIInput");
const UIIcon_1 = require("../UIIcon");
const Icons_1 = require("../Icons");
require("./UIDatePicker.scss");
/**
 * UIDatePicker component.
 *
 * @exports
 * @class {UIDatePicker}
 * @extends {React.Component<UIDatePickerProps>}
 */
class UIDatePicker extends react_1.default.Component {
    /**
     * Initializes component properties.
     *
     * @param {UIDatePickerProps} props
     */
    constructor(props) {
        super(props);
        this.state = {
            value: ''
        };
        this.dateRegex = /^\d{4}-\d{2}-\d{2}$/;
        this.dateTimeRegex = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}$/;
        this.state.value = props.defaultValue ?? '';
        this.onInputChange = this.onInputChange.bind(this);
        this.onPickerChange = this.onPickerChange.bind(this);
    }
    /**
     * On input change event.
     *
     * @param {React.FormEvent<HTMLInputElement | HTMLTextAreaElement>} e
     * @param {string} newValue
     */
    onInputChange(e, newValue = '') {
        newValue = newValue.trim();
        this.props.onChange?.(e, newValue);
        this.setState({ value: newValue });
    }
    /**
     * On Date picker change.
     *
     * @param {React.FormEvent<HTMLInputElement | HTMLTextAreaElement>} e
     */
    onPickerChange(e) {
        let newValue = e.target.value;
        if (!this.props.dateOnly && !this.dateTimeRegex.test(newValue)) {
            newValue = `${e.target.value}:00`;
        }
        this.props.onChange?.(e, newValue);
        this.setState({ value: newValue });
    }
    /**
     * @returns {JSX.Element}
     */
    render() {
        const isFormat = this.dateRegex.test(this.state.value) || this.dateTimeRegex.test(this.state.value);
        return (react_1.default.createElement("div", { className: "ui-DatePicker", onKeyDown: this.props.onKeyDown, onClick: this.props.onClick },
            react_1.default.createElement(UIInput_1.UITextInput, { componentRef: this.props.componentRef, errorMessage: this.props.errorMessage, value: this.state.value, onChange: this.onInputChange }),
            react_1.default.createElement("div", { className: "ui-DatePicker-toggle" },
                react_1.default.createElement(UIIcon_1.UIIcon, { iconName: Icons_1.UiIcons.Calendar }),
                react_1.default.createElement("input", { type: this.props.dateOnly ? 'date' : 'datetime-local', step: "1", value: isFormat ? this.state.value : '', onChange: this.onPickerChange }))));
    }
}
exports.UIDatePicker = UIDatePicker;
//# sourceMappingURL=UIDatePicker.js.map