"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.UITextInput = exports.COMMON_INPUT_STYLES = void 0;
const react_1 = __importDefault(require("react"));
const react_2 = require("@fluentui/react");
const ValidationMessage_1 = require("../../helper/ValidationMessage");
const UILabel_1 = require("../UILabel");
const types_1 = require("../types");
exports.COMMON_INPUT_STYLES = {
    borderRadius: 4
};
const COLOR_STYLES = {
    regular: {
        backgroundColor: 'var(--vscode-input-background)',
        borderColor: 'var(--vscode-editorWidget-border)',
        color: 'var(--vscode-input-foreground)',
        borderStyle: 'solid'
    },
    disabled: {
        backgroundColor: 'var(--vscode-editor-inactiveSelectionBackground)',
        opacity: 0.5
    },
    readOnly: {
        backgroundColor: 'var(--vscode-editor-background)',
        borderStyle: 'dashed'
    },
    hover: {
        borderColor: 'var(--vscode-focusBorder)'
    },
    focus: {
        borderColor: 'var(--vscode-focusBorder)'
    }
};
/**
 * UITextInput component
 * based on https://developer.microsoft.com/en-us/fluentui#/controls/web/textfield
 *
 * @exports
 * @class UITextInput
 * @extends {React.Component<ITextFieldProps, {}>}
 */
class UITextInput extends react_1.default.Component {
    /**
     * Initializes component properties.
     *
     * @param {UITextInputProps} props
     */
    constructor(props) {
        super(props);
        /**
         * Method returns styles for text field.
         *
         * @param {ITextFieldStyleProps} props Component properties.
         * @returns {Partial<ITextFieldStyles>} Styles to apply for text field.
         */
        this.getStyles = (props) => {
            const messageInfo = (0, ValidationMessage_1.getMessageInfo)(this.props);
            return {
                ...{
                    root: {
                        height: 'auto'
                    },
                    fieldGroup: [
                        // Common styles
                        {
                            backgroundColor: COLOR_STYLES.regular.backgroundColor,
                            borderWidth: 1,
                            borderStyle: COLOR_STYLES.regular.borderStyle,
                            borderColor: COLOR_STYLES.regular.borderColor,
                            color: COLOR_STYLES.regular.color,
                            borderRadius: exports.COMMON_INPUT_STYLES.borderRadius,
                            boxSizing: 'initial'
                        },
                        // Single line common styles
                        !props.multiline && {
                            height: 24,
                            maxHeight: 24,
                            minHeight: 24
                        },
                        // Hoverable input
                        !props.disabled && {
                            selectors: {
                                '&:hover': {
                                    borderColor: COLOR_STYLES.hover.borderColor
                                }
                            }
                        },
                        // Disabled field
                        props.disabled && {
                            backgroundColor: COLOR_STYLES.disabled.backgroundColor,
                            opacity: COLOR_STYLES.disabled.opacity,
                            borderRadius: exports.COMMON_INPUT_STYLES.borderRadius
                        },
                        // Read only container - disable hover style
                        this.props.readOnly && {
                            borderStyle: COLOR_STYLES.readOnly.borderStyle,
                            backgroundColor: COLOR_STYLES.readOnly.backgroundColor,
                            // No hover efect on input without value
                            selectors: !this.props.value
                                ? {
                                    '&:hover': {
                                        borderColor: 'var(--vscode-editorWidget-border)'
                                    }
                                }
                                : undefined
                        },
                        // Error message
                        props.hasErrorMessage && {
                            borderColor: messageInfo.style.borderColor
                        },
                        props.focused && {
                            selectors: {
                                ':after': {
                                    border: this.getFocusBorder(messageInfo),
                                    borderRadius: exports.COMMON_INPUT_STYLES.borderRadius
                                }
                            }
                        }
                    ],
                    field: [
                        // Common styles
                        {
                            backgroundColor: COLOR_STYLES.regular.backgroundColor,
                            color: COLOR_STYLES.regular.color,
                            fontSize: '13px',
                            fontWeight: 'normal',
                            boxSizing: 'border-box',
                            borderRadius: exports.COMMON_INPUT_STYLES.borderRadius,
                            selectors: {
                                '::placeholder': {
                                    fontSize: 13,
                                    color: 'var(--vscode-input-placeholderForeground)'
                                }
                            }
                        },
                        // Single line common styles
                        !props.multiline && {
                            lineHeight: 'normal'
                        },
                        // Multi line common styles
                        props.multiline && {
                            minHeight: '60px',
                            height: 'auto',
                            display: 'flex'
                        },
                        // Disabled input
                        props.disabled && {
                            backgroundColor: 'transparent'
                        },
                        // Readonly input
                        this.props.readOnly && {
                            fontStyle: 'italic',
                            backgroundColor: COLOR_STYLES.readOnly.backgroundColor
                        },
                        // Input with icon
                        props.hasIcon && {
                            selectors: {
                                '&:hover': {
                                    cursor: 'pointer'
                                }
                            }
                        }
                    ],
                    suffix: {
                        backgroundColor: 'var(--vscode-input-background)'
                    },
                    subComponentStyles: {
                        label: {
                            root: [
                                {
                                    marginTop: 25,
                                    ...UILabel_1.labelGlobalStyle
                                },
                                props.disabled && {
                                    opacity: COLOR_STYLES.disabled.opacity
                                },
                                props.required && {
                                    selectors: {
                                        '::after': {
                                            content: types_1.REQUIRED_LABEL_INDICATOR,
                                            color: 'var(--vscode-inputValidation-errorBorder)',
                                            paddingRight: 12
                                        }
                                    }
                                }
                            ]
                        }
                    },
                    errorMessage: [messageInfo.style],
                    icon: [
                        {
                            bottom: 2
                        }
                    ]
                }
            };
        };
        this.onRenderInput = this.onRenderInput.bind(this);
    }
    /**
     * Method returns value for CSS property "border" for focus state.
     *
     * @param {InputValidationMessageInfo} messageInfo
     * @returns {string} Value for CSS "border" property.
     */
    getFocusBorder(messageInfo) {
        let color = COLOR_STYLES.focus.borderColor;
        if (this.props.errorMessage && messageInfo.style.borderColor) {
            color = `var(${messageInfo.style.borderColor})`;
        }
        return `1px ${COLOR_STYLES.regular.borderStyle} ${color}`;
    }
    /**
     * Method to extend HTML input element.
     * Custom rendering is used to use "readonly" attribute instead of "disabled" to make disabled field focusable.
     *
     * @param {InputRenderProps} [props] Input props.
     * @param {(props?: InputRenderProps) => JSX.Element | null} [defaultRender] Default renderer.
     * @returns {JSX.Element | null} Input element to render.
     */
    onRenderDisabledInput(props, defaultRender) {
        const inputProps = this.props.disabled
            ? {
                ...props,
                disabled: undefined,
                readOnly: true,
                ['aria-disabled']: true
            }
            : props;
        return defaultRender?.(inputProps) || null;
    }
    /**
     * Method to render HTML input element.
     *
     * @param {InputRenderProps} [props] Input props.
     * @param {(props?: InputRenderProps) => JSX.Element | null} [defaultRender] Default renderer.
     * @returns {JSX.Element | null} Input element to render.
     */
    onRenderInput(props, defaultRender) {
        if (this.props.onRenderInput) {
            return this.props.onRenderInput(props, (renderProps) => {
                return this.onRenderDisabledInput(renderProps, defaultRender);
            });
        }
        return this.onRenderDisabledInput(props, defaultRender);
    }
    /**
     * @returns {JSX.Element}
     */
    render() {
        const messageInfo = (0, ValidationMessage_1.getMessageInfo)(this.props);
        const textFieldStyles = this.getStyles;
        return (react_1.default.createElement(react_2.TextField, { ...this.props, onRenderInput: this.onRenderInput, errorMessage: messageInfo.message, styles: textFieldStyles }));
    }
}
exports.UITextInput = UITextInput;
//# sourceMappingURL=UITextInput.js.map