import { Fragment as _Fragment, jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
import React from "react";
import Tooltip from '@material-ui/core/Tooltip';
import { BaseTextEntryControl } from "./BaseTextEntryControl";
import { TextControlStyle } from "../FormDesignConstants";
import { StyledInputLabel, StyledFormHelperText } from "./XCommonStyled";
import { StyledTextField } from "./XCommonStyled";
import { DateDataDefinition } from "../../Common/Data/Definitions/DateDataDefinition";
class XDatePickerEditUI extends React.Component {
    render() {
        return (_jsxs(_Fragment, { children: [this.props.editMe.renderBaseDataControlEditor(), this.props.editMe.renderTextControlBasePropertyEditor(), this.props.editMe.renderTextStyleSelectionEditor()] }, void 0));
    }
}
export class XDatePicker extends BaseTextEntryControl {
    constructor() {
        super(...arguments);
        this.handleChange = (event) => {
            //        console.log(event.currentTarget.value);
            if (this.valueName) {
                this.setFormDataValue(this.valueName, event.currentTarget.value);
            }
        };
    }
    formatDate(date) {
        var d = new Date(date), month = '' + (d.getMonth() + 1), day = '' + d.getDate(), year = d.getFullYear();
        if (month.length < 2)
            month = '0' + month;
        if (day.length < 2)
            day = '0' + day;
        return [year, month, day].join('-');
    }
    render() {
        var _a, _b, _c, _d, _e;
        let style = (_b = ((_a = this.getFormContext()) === null || _a === void 0 ? void 0 : _a.form)) === null || _b === void 0 ? void 0 : _b.defaultTextStyle;
        if (this.overrideStyle && this.style)
            style = this.style;
        let size = (_e = (_d = ((_c = this.getFormContext()) === null || _c === void 0 ? void 0 : _c.form)) === null || _d === void 0 ? void 0 : _d.defaultTextSize) !== null && _e !== void 0 ? _e : 'medium';
        if (this.overrideStyle && this.size)
            size = this.size;
        const issueData = this.getFormContext().getControlContext(this).getRuntimeIssueData();
        const issueText = (issueData === null || issueData === void 0 ? void 0 : issueData.text) || '';
        const customWidth = this.fullWidth ? '100%' : this.width ? `${this.width}px` : '200px';
        switch (style) {
            case TextControlStyle.LABELED:
                return (_jsxs("form", Object.assign({ noValidate: true }, { children: [this.label && _jsx(StyledInputLabel, { children: this.label }, void 0),
                        _jsx(StyledTextField, { size: size, "data-size": size, variant: "outlined", type: "date", fullWidth: this.fullWidth, value: this.valueName ? this.getFormDataValue(this.valueName) : this.formatDate(new Date()), onChange: this.handleChange, "data-testid": this.valueName, width: customWidth, error: Boolean(issueText), InputProps: {
                                inputRef: this.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": `${this.valueName || 'datepicker'}-hinttext` }, { children: issueText.slice(0, 30) + '...' }), void 0) }), void 0)),
                        ((issueText && issueText.length < 31) || this.hintText) && (_jsx(StyledFormHelperText, Object.assign({ error: Boolean(issueText), "data-testid": `${this.valueName || 'datepicker'}-hinttext` }, { children: issueText ? issueText : this.hintText }), void 0))] }), void 0));
            case TextControlStyle.SHADED:
                return (_jsxs("form", Object.assign({ noValidate: true }, { children: [_jsx(StyledTextField, { size: size, "data-size": size, variant: "filled", customstyle: "filled", type: "date", fullWidth: this.fullWidth, value: this.valueName ? this.getFormDataValue(this.valueName) : this.formatDate(new Date()), onChange: this.handleChange, "data-testid": this.valueName, width: customWidth, error: Boolean(issueText), label: this.label, InputProps: {
                                inputRef: this.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": `${this.valueName || 'datepicker'}-hinttext` }, { children: issueText.slice(0, 30) + '...' }), void 0) }), void 0)),
                        ((issueText && issueText.length < 31) || this.hintText) && (_jsx(StyledFormHelperText, Object.assign({ error: Boolean(issueText), "data-testid": `${this.valueName || 'datepicker'}-hinttext` }, { children: issueText ? issueText : this.hintText }), void 0))] }), void 0));
            case TextControlStyle.UNDERLINED:
                return (_jsxs("form", Object.assign({ noValidate: true }, { children: [_jsx(StyledTextField, { size: size, "data-size": size, variant: "standard", customstyle: "standard", type: "date", fullWidth: this.fullWidth, value: this.valueName ? this.getFormDataValue(this.valueName) : this.formatDate(new Date()), onChange: this.handleChange, "data-testid": this.valueName, width: customWidth, error: Boolean(issueText), label: this.label, ispicker: 'true', InputProps: {
                                inputRef: this.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": `${this.valueName || 'datepicker'}-hinttext` }, { children: issueText.slice(0, 30) + '...' }), void 0) }), void 0)),
                        ((issueText && issueText.length < 31) || this.hintText) && (_jsx(StyledFormHelperText, Object.assign({ error: Boolean(issueText), "data-testid": `${this.valueName || 'datepicker'}-hinttext` }, { children: issueText ? issueText : this.hintText }), void 0))] }), void 0));
            case TextControlStyle.OUTLINE:
                return (_jsxs("form", Object.assign({ noValidate: true }, { children: [_jsx(StyledTextField, { size: size, "data-size": size, variant: "outlined", customstyle: "outlined", type: "date", fullWidth: this.fullWidth, value: this.valueName ? this.getFormDataValue(this.valueName) : this.formatDate(new Date()), onChange: this.handleChange, "data-testid": this.valueName, width: customWidth, error: Boolean(issueText), label: this.label, ispicker: 'true', InputProps: {
                                inputRef: this.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": `${this.valueName || 'datepicker'}-hinttext` }, { children: issueText.slice(0, 30) + '...' }), void 0) }), void 0)),
                        ((issueText && issueText.length < 31) || this.hintText) && (_jsx(StyledFormHelperText, Object.assign({ error: Boolean(issueText), "data-testid": `${this.valueName || 'datepicker'}-hinttext` }, { children: issueText ? issueText : this.hintText }), void 0))] }), void 0));
        }
    }
    renderEditUI() {
        return _jsx(XDatePickerEditUI, { editMe: this }, void 0);
    }
    getAddedData() {
        if (!this.valueName)
            return;
        let def = new DateDataDefinition();
        def.name = this.valueName;
        return def;
    }
}
//# sourceMappingURL=XDatePicker.js.map