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 { StringDataDefinition } from "../../Common/Data/Definitions/StringDataDefinition";
class XTimePickerEditUI extends React.Component {
    render() {
        return (_jsxs(_Fragment, { children: [this.props.editMe.renderBaseDataControlEditor(), this.props.editMe.renderTextControlBasePropertyEditor(), this.props.editMe.renderTextStyleSelectionEditor()] }, void 0));
    }
}
export class XTimePicker extends BaseTextEntryControl {
    constructor() {
        super(...arguments);
        this.handleChange = (event) => {
            if (this.valueName) {
                this.setFormDataValue(this.valueName, event.currentTarget.value);
            }
        };
    }
    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(_Fragment, { children: [this.label && _jsx(StyledInputLabel, Object.assign({ "data-role": TextControlStyle.LABELED }, { children: this.label }), void 0),
                        _jsx(StyledTextField, { size: size, "data-size": size, variant: "outlined", fullWidth: this.fullWidth, type: "time", value: this.valueName ? this.getFormDataValue(this.valueName) : String, 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 || 'timepicker'}-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 || 'timepicker'}-hinttext` }, { children: issueText ? issueText : this.hintText }), void 0))] }, void 0));
            case TextControlStyle.SHADED:
                return (_jsxs(_Fragment, { children: [_jsx(StyledTextField, { size: size, "data-size": size, variant: "filled", customstyle: "filled", fullWidth: this.fullWidth, type: "time", value: this.valueName ? this.getFormDataValue(this.valueName) : String, onChange: this.handleChange, "data-testid": this.valueName, width: customWidth, error: Boolean(issueText), label: this.valueName, 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 || 'timepicker'}-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 || 'timepicker'}-hinttext` }, { children: issueText ? issueText : this.hintText }), void 0))] }, void 0));
            case TextControlStyle.UNDERLINED:
                return (_jsxs(_Fragment, { children: [_jsx(StyledTextField, { size: size, "data-size": size, variant: "standard", customstyle: "standard", fullWidth: this.fullWidth, type: "time", value: this.valueName ? this.getFormDataValue(this.valueName) : String, onChange: this.handleChange, "data-testid": this.valueName, width: customWidth, error: Boolean(issueText), label: this.valueName, 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 || 'timepicker'}-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 || 'timepicker'}-hinttext` }, { children: issueText ? issueText : this.hintText }), void 0))] }, void 0));
            case TextControlStyle.OUTLINE:
                return (_jsxs(_Fragment, { children: [_jsx(StyledTextField, { size: size, "data-size": size, variant: "outlined", customstyle: "outlined", fullWidth: this.fullWidth, type: "time", value: this.valueName ? this.getFormDataValue(this.valueName) : String, onChange: this.handleChange, "data-testid": this.valueName, width: customWidth, error: Boolean(issueText), label: this.valueName, 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 || 'timepicker'}-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 || 'timepicker'}-hinttext` }, { children: issueText ? issueText : this.hintText }), void 0))] }, void 0));
        }
    }
    renderEditUI() {
        return _jsx(XTimePickerEditUI, { editMe: this }, void 0);
    }
    getAddedData() {
        if (!this.valueName)
            return;
        let def = new StringDataDefinition();
        def.name = this.valueName;
        return def;
    }
}
//# sourceMappingURL=XTimePicker.js.map