import * as classnames from "classnames";
import * as React from "react";
import { useState, useEffect } from "react";
import * as FontAwesome from "react-fontawesome";
import { Button } from "../Button/Button";
import { FormElementSize, formElementSizeClassName, FormElementRequirement } from "../utils/Forms";
import "./TextInput2.less";
export var cssClass = {
    CONTAINER: "TextInput2--container",
    INFO_ROW: "TextInput2--infoRow",
    INFO_ROW_LABEL_HIDDEN: "TextInput2--infoRow--labelHidden",
    INFO_REQUIREMENT: "TextInput2--infoRequirement",
    LABEL: "TextInput2--label",
    LABEL_HIDDEN: "TextInput2--label--hidden",
    LEADING_ICON: "TextInput2--leadingIcon",
    INPUT_CONTAINER: "TextInput2--inputContainer",
    INPUT_CONTAINER_FOCUSED: "TextInput2--inputContainer--focused",
    INPUT_CONTAINER_ERROR: "TextInput2--inputContainer--error",
    INPUT_CONTAINER_DISABLED: "TextInput2--inputContainer--disabled",
    INPUT: "TextInput2--input",
    FOOTER_TEXT: "TextInput2--footerText",
    ERROR_MESSAGE: "TextInput2--footerText--error",
    ERROR_ICON: "TextInput2--errorIcon",
    HIDE_SHOW: "TextInput2--hideShowButton",
};
/*
 * text input
 */
var TextInput2 = function (_a) {
    var className = _a.className, name = _a.name, label = _a.label, hideLabel = _a.hideLabel, placeholder = _a.placeholder, helpText = _a.helpText, icon = _a.icon, requirement = _a.requirement, errorOnEmpty = _a.errorOnEmpty, errorOnFocus = _a.errorOnFocus, errorValidation = _a.errorValidation, obscurable = _a.obscurable, value = _a.value, onChange = _a.onChange, onFocus = _a.onFocus, onBlur = _a.onBlur, size = _a.size, autoFocus = _a.autoFocus;
    var id = name;
    var _b = useState(false), isFocused = _b[0], setIsFocused = _b[1];
    var _c = useState(true), isObscured = _c[0], setIsObscured = _c[1];
    var inputType = obscurable && isObscured ? "password" : "text";
    // NOTE: setting errorMessage to an empty string displays an error state with no message (e.g. required)
    var _d = useState(null), errorMessage = _d[0], setErrorMessage = _d[1];
    useEffect(function () {
        // if value is empty, either:
        // 1) display empty error if errorOnEmpty is true and input isn't in focus
        // 2) remove error
        if (!value) {
            setErrorMessage(errorOnEmpty && !isFocused ? "" : null);
            return;
        }
        var newErrorMessage = errorValidation(value);
        // show error if input is out of focus
        if (newErrorMessage && !isFocused) {
            setErrorMessage(newErrorMessage);
        }
        // show error if input is in focus
        else if (newErrorMessage && isFocused && errorOnFocus) {
            setErrorMessage(newErrorMessage);
            return;
        }
        // remove error if it has been corrected
        if (!newErrorMessage)
            setErrorMessage(null);
    }, [value, isFocused, errorOnEmpty]);
    return (React.createElement("div", { className: classnames(cssClass.CONTAINER, formElementSizeClassName(size), className) },
        React.createElement("div", { className: classnames(cssClass.INFO_ROW, hideLabel && cssClass.INFO_ROW_LABEL_HIDDEN) },
            React.createElement("label", { className: classnames(cssClass.LABEL, hideLabel && cssClass.LABEL_HIDDEN), htmlFor: id }, label),
            requirement && (React.createElement("label", { className: cssClass.INFO_REQUIREMENT, "aria-live": "polite", htmlFor: id }, requirement))),
        React.createElement("div", { className: classnames(cssClass.INPUT_CONTAINER, isFocused && cssClass.INPUT_CONTAINER_FOCUSED, errorMessage != null && cssClass.INPUT_CONTAINER_ERROR, requirement === FormElementRequirement.DISABLED && cssClass.INPUT_CONTAINER_DISABLED) },
            icon && React.createElement("i", { className: cssClass.LEADING_ICON }, icon),
            React.createElement("input", { id: id, name: id, className: cssClass.INPUT, role: "textbox", type: inputType, value: value, placeholder: placeholder, disabled: requirement === FormElementRequirement.DISABLED, onChange: onChange, onFocus: function (e) {
                    setIsFocused(true);
                    if (onFocus)
                        onFocus(e);
                }, onBlur: function (e) {
                    setIsFocused(false);
                    if (onBlur)
                        onBlur(e);
                }, autoFocus: autoFocus }),
            errorMessage != null && (React.createElement(FontAwesome, { className: cssClass.ERROR_ICON, name: "exclamation-circle" })),
            obscurable && (React.createElement(Button, { className: cssClass.HIDE_SHOW, type: "linkPlain", onClick: function (e) { return setIsObscured(!isObscured); }, value: isObscured ? "Show" : "Hide" }))),
        (errorMessage || helpText) && (React.createElement("div", { className: classnames(cssClass.FOOTER_TEXT, errorMessage && cssClass.ERROR_MESSAGE) }, errorMessage || helpText))));
};
TextInput2.defaultProps = {
    errorOnEmpty: false,
    errorValidation: function () { return null; },
    size: FormElementSize.FULL_WIDTH,
};
export default TextInput2;
