"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.PasswordFormControl = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
const Tooltip_1 = tslib_1.__importDefault(require("@material-ui/core/Tooltip"));
const TextEntryFormControl_1 = require("../TextEntryFormControl");
const FormDesignConstants_1 = require("../../Utilities/FormDesignConstants");
const CommonStyled_1 = require("./CommonStyled");
const StringDataDefinition_1 = require("@appglue/common/dist/Common/Data/Definitions/StringDataDefinition");
const IDesignValidationProvider_1 = require("@appglue/common/dist/Common/IDesignValidationProvider");
const core_1 = require("@material-ui/core");
const PropertyEditorBoolean_1 = require("../../../CommonUI/PropertyEditing/PropertyEditorBoolean");
const PropertyEditorInteger_1 = require("../../../CommonUI/PropertyEditing/PropertyEditorInteger");
const ShowIcon_1 = require("../../../CommonUI/Icon/ShowIcon");
const HideIcon_1 = require("../../../CommonUI/Icon/HideIcon");
const ObserveState_1 = require("../../../CommonUI/StateManagement/ObserveState");
const StateManager_1 = require("@appglue/common/dist/Common/StateManager");
const DataUtilities_1 = require("@appglue/common/dist/Common/DataUtilities");
class PasswordFormControl extends TextEntryFormControl_1.TextEntryFormControl {
    __type = "Password";
    // options
    requireMinLength = false;
    requireUpperCaseAndLowerCase = false;
    requireNumber = false;
    requireSymbol = false;
    confirmPasswordRequired = false;
    minimumLength = 3;
    confirmPassword = "";
    isMask = true;
    gapWithConfirmPassword = 10;
    getRuntimeValidationIssues() {
        const runtimeIssues = super.getRuntimeValidationIssues();
        const validationPasswordIssues = this.validatePassword();
        if (validationPasswordIssues) {
            for (let val of validationPasswordIssues) {
                runtimeIssues.push(new IDesignValidationProvider_1.ValidationIssue(val, this.valueName, this.id));
            }
        }
        return runtimeIssues;
    }
    render() {
        return ((0, jsx_runtime_1.jsx)(ObserveState_1.ObserveState, { listenTo: this, properties: ["isMask", "confirmPassword"], control: () => {
                let style = this.getFormContext()?.form?.defaultTextStyle;
                if (this.overrideStyle && this.style)
                    style = this.style;
                let size = this.getFormContext()?.form?.defaultTextSize ?? "medium";
                if (this.overrideStyle && this.size)
                    size = this.size;
                const issueData = this.getFormContext()
                    .getControlContext(this)
                    .getRuntimeIssueData();
                const issueText = issueData?.text || "";
                const customWidth = this.fullWidth ? "100%" : this.width ? `${this.width}px` : "200px";
                let content = null;
                switch (style) {
                    case FormDesignConstants_1.TextControlStyle.LABELED:
                        content = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(StyledTextFieldWrap, { width: customWidth, children: [this.label && ((0, jsx_runtime_1.jsx)(CommonStyled_1.StyledInputLabel, { "data-role": FormDesignConstants_1.TextControlStyle.LABELED, children: this.label })), (0, jsx_runtime_1.jsx)(CommonStyled_1.StyledTextField, { type: this.isMask ? "password" : "text", size: size, "data-size": size, "data-testid": this.valueName, variant: "outlined", fullWidth: this.fullWidth, width: customWidth, value: this.getValue(), onChange: this.handleChange, error: Boolean(issueText), InputProps: {
                                                endAdornment: ((0, jsx_runtime_1.jsx)(core_1.IconButton, { onClick: this.showPassword, children: this.isMask ? (0, jsx_runtime_1.jsx)(ShowIcon_1.ShowIcon, {}) : (0, jsx_runtime_1.jsx)(HideIcon_1.HideIcon, {}) })),
                                                inputRef: this.ref,
                                            } }), issueText && issueText.length > 30 && ((0, jsx_runtime_1.jsx)(Tooltip_1.default, { title: issueText, arrow: true, placement: "bottom", children: (0, jsx_runtime_1.jsx)(CommonStyled_1.StyledFormHelperText, { error: Boolean(issueText), "data-testid": `${this.valueName || "textfield"}-hinttext`, children: issueText.slice(0, 30) + "..." }) })), ((issueText && issueText.length < 31) || this.hintText) && ((0, jsx_runtime_1.jsx)(CommonStyled_1.StyledFormHelperText, { error: Boolean(issueText), "data-testid": `${this.valueName || "textfield"}-hinttext`, children: issueText ? issueText : this.hintText }))] }), this.confirmPasswordRequired && ((0, jsx_runtime_1.jsxs)(StyledTextFieldWrap, { width: customWidth, marginTop: this.gapWithConfirmPassword, children: [this.label && ((0, jsx_runtime_1.jsxs)(CommonStyled_1.StyledInputLabel, { "data-role": FormDesignConstants_1.TextControlStyle.LABELED, children: ["Confirm ", this.label] })), (0, jsx_runtime_1.jsx)(CommonStyled_1.StyledTextField, { type: this.isMask ? "password" : "text", size: size, "data-size": size, "data-testid": `${this.valueName || "textfield"}-confirm`, variant: "outlined", fullWidth: this.fullWidth, width: customWidth, value: this.confirmPassword, onChange: this.handleConfirmPasswordChange, error: Boolean(issueText), InputProps: {
                                                inputRef: this.ref,
                                            } }), issueText && issueText.length > 30 && ((0, jsx_runtime_1.jsx)(Tooltip_1.default, { title: issueText, arrow: true, placement: "bottom", children: (0, jsx_runtime_1.jsx)(CommonStyled_1.StyledFormHelperText, { error: Boolean(issueText), "data-testid": `${this.valueName || "textfield"}-hinttext`, children: issueText.slice(0, 30) + "..." }) })), ((issueText && issueText.length < 31) || this.hintText) && ((0, jsx_runtime_1.jsx)(CommonStyled_1.StyledFormHelperText, { error: Boolean(issueText), "data-testid": `${this.valueName || "textfield"}-hinttext`, children: issueText ? issueText : this.hintText }))] }))] }));
                        break;
                    case FormDesignConstants_1.TextControlStyle.SHADED:
                        content = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(StyledTextFieldWrap, { width: customWidth, children: [(0, jsx_runtime_1.jsx)(CommonStyled_1.StyledTextField, { size: size, type: this.isMask ? "password" : "text", "data-size": size, "data-testid": this.valueName, variant: "filled", customstyle: "filled", fullWidth: this.fullWidth, width: customWidth, value: this.getValue(), onChange: this.handleChange, error: Boolean(issueText), label: this.label ? this.label : this.valueName, InputProps: {
                                                endAdornment: ((0, jsx_runtime_1.jsx)(core_1.IconButton, { onClick: this.showPassword, children: this.isMask ? (0, jsx_runtime_1.jsx)(ShowIcon_1.ShowIcon, {}) : (0, jsx_runtime_1.jsx)(HideIcon_1.HideIcon, {}) })),
                                                inputRef: this.ref,
                                            } }), (issueText || this.hintText) && ((0, jsx_runtime_1.jsx)(CommonStyled_1.StyledFormHelperText, { error: Boolean(issueText), "data-testid": `${this.valueName || "textfield"}-hinttext`, children: issueText ? issueText : this.hintText }))] }), this.confirmPasswordRequired && ((0, jsx_runtime_1.jsxs)(StyledTextFieldWrap, { width: customWidth, marginTop: this.gapWithConfirmPassword, children: [(0, jsx_runtime_1.jsx)(CommonStyled_1.StyledTextField, { size: size, type: this.isMask ? "password" : "text", "data-size": size, "data-testid": `${this.valueName || "textfield"}-confirm`, variant: "filled", customstyle: "filled", fullWidth: this.fullWidth, width: customWidth, value: this.confirmPassword, onChange: this.handleConfirmPasswordChange, error: Boolean(issueText), label: `Confirm ${this.label ? this.label : this.valueName}`, InputProps: {
                                                inputRef: this.ref,
                                            } }), (issueText || this.hintText) && ((0, jsx_runtime_1.jsx)(CommonStyled_1.StyledFormHelperText, { error: Boolean(issueText), "data-testid": `${this.valueName || "textfield"}-hinttext`, children: issueText ? issueText : this.hintText }))] }))] }));
                        break;
                    case FormDesignConstants_1.TextControlStyle.UNDERLINED:
                        content = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(StyledTextFieldWrap, { width: customWidth, children: [(0, jsx_runtime_1.jsx)(CommonStyled_1.StyledTextField, { size: size, type: this.isMask ? "password" : "text", "data-size": size, "data-testid": this.valueName, variant: "standard", customstyle: "standard", fullWidth: this.fullWidth, width: customWidth, value: this.getValue(), onChange: this.handleChange, error: Boolean(issueText), label: this.label ? this.label : this.valueName, InputProps: {
                                                endAdornment: ((0, jsx_runtime_1.jsx)(core_1.IconButton, { onClick: this.showPassword, children: this.isMask ? (0, jsx_runtime_1.jsx)(ShowIcon_1.ShowIcon, {}) : (0, jsx_runtime_1.jsx)(HideIcon_1.HideIcon, {}) })),
                                                inputRef: this.ref,
                                            } }), (issueText || this.hintText) && ((0, jsx_runtime_1.jsx)(CommonStyled_1.StyledFormHelperText, { error: Boolean(issueText), "data-testid": `${this.valueName || "textfield"}-hinttext`, children: issueText ? issueText : this.hintText }))] }), this.confirmPasswordRequired && ((0, jsx_runtime_1.jsxs)(StyledTextFieldWrap, { width: customWidth, marginTop: this.gapWithConfirmPassword, children: [(0, jsx_runtime_1.jsx)(CommonStyled_1.StyledTextField, { size: size, type: this.isMask ? "password" : "text", "data-size": size, "data-testid": `${this.valueName || "textfield"}-confirm`, variant: "standard", customstyle: "standard", fullWidth: this.fullWidth, width: customWidth, value: this.confirmPassword, onChange: this.handleConfirmPasswordChange, error: Boolean(issueText), label: `Confirm ${this.label ? this.label : this.valueName}`, InputProps: {
                                                inputRef: this.ref,
                                            } }), (issueText || this.hintText) && ((0, jsx_runtime_1.jsx)(CommonStyled_1.StyledFormHelperText, { error: Boolean(issueText), "data-testid": `${this.valueName || "textfield"}-hinttext`, children: issueText ? issueText : this.hintText }))] }))] }));
                        break;
                    case FormDesignConstants_1.TextControlStyle.OUTLINE:
                        content = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(StyledTextFieldWrap, { width: customWidth, children: [(0, jsx_runtime_1.jsx)(CommonStyled_1.StyledTextField, { size: size, type: this.isMask ? "password" : "text", "data-size": size, "data-testid": this.valueName, variant: "outlined", customstyle: "outlined", fullWidth: this.fullWidth, width: customWidth, value: this.getValue(), onChange: this.handleChange, error: Boolean(issueText), label: this.label ? this.label : this.valueName, InputProps: {
                                                endAdornment: ((0, jsx_runtime_1.jsx)(core_1.IconButton, { onClick: this.showPassword, children: this.isMask ? (0, jsx_runtime_1.jsx)(ShowIcon_1.ShowIcon, {}) : (0, jsx_runtime_1.jsx)(HideIcon_1.HideIcon, {}) })),
                                                inputRef: this.ref,
                                            } }), (issueText || this.hintText) && ((0, jsx_runtime_1.jsx)(CommonStyled_1.StyledFormHelperText, { error: Boolean(issueText), "data-testid": `${this.valueName || "textfield"}-hinttext`, children: issueText ? issueText : this.hintText }))] }), this.confirmPasswordRequired && ((0, jsx_runtime_1.jsxs)(StyledTextFieldWrap, { width: customWidth, marginTop: this.gapWithConfirmPassword, children: [(0, jsx_runtime_1.jsx)(CommonStyled_1.StyledTextField, { size: size, type: this.isMask ? "password" : "text", "data-size": size, "data-testid": `${this.valueName || "textfield"}-confirm`, variant: "outlined", customstyle: "outlined", fullWidth: this.fullWidth, width: customWidth, value: this.confirmPassword, onChange: this.handleConfirmPasswordChange, error: Boolean(issueText), label: `Confirm ${this.label ? this.label : this.valueName}`, InputProps: {
                                                inputRef: this.ref,
                                            } }), (issueText || this.hintText) && ((0, jsx_runtime_1.jsx)(CommonStyled_1.StyledFormHelperText, { error: Boolean(issueText), "data-testid": `${this.valueName || "textfield"}-hinttext`, children: issueText ? issueText : this.hintText }))] }))] }));
                        break;
                }
                return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: content });
            } }));
    }
    renderEditUI() {
        return (0, jsx_runtime_1.jsx)(XPasswordBoxEditUI, { editMe: this });
    }
    getAddedData() {
        if (!this.valueName)
            return;
        let def = new StringDataDefinition_1.StringDataDefinition();
        def.name = this.valueName;
        return def;
    }
    getStorageData() {
        let retData = super.getStorageData();
        retData = DataUtilities_1.DataUtilities.addStorageData(this, retData, "__type", "requireMinLength", "requireUpperCaseAndLowerCase", "requireNumber", "requireSymbol", "confirmPasswordRequired", "minimumLength", "confirmPassword", "isMask", "gapWithConfirmPassword");
        return retData;
    }
    setStorageData(data) {
        super.setStorageData(data);
        DataUtilities_1.DataUtilities.setStorageData(this, data, "__type", "requireMinLength", "requireUpperCaseAndLowerCase", "requireNumber", "requireSymbol", "confirmPasswordRequired", "minimumLength", "confirmPassword", "isMask", "gapWithConfirmPassword");
    }
    showPassword = () => {
        this.isMask = !this.isMask;
        StateManager_1.StateManager.propertyChanged(this, "isMask");
    };
    handleChange = (event) => {
        if (this.valueName) {
            this.setFormDataValue(this.valueName, event.currentTarget.value);
        }
    };
    getValue = () => {
        return this.valueName ? this.getFormDataValue(this.valueName) : "";
    };
    handleConfirmPasswordChange = (event) => {
        if (this.getValue() && this.getValue() !== "") {
            this.confirmPassword = event.currentTarget.value;
            StateManager_1.StateManager.propertyChanged(this, "confirmPassword");
            // todo: fix
            this.setFormDataValue(this.valueName, this.getValue());
        }
    };
    validatePassword = () => {
        let passwordValue = this.valueName ? this.getFormDataValue(this.valueName) : "";
        if (this.valueName && passwordValue) {
            const errorMessages = [];
            if (this.requireMinLength === true) {
                if (passwordValue.length < this.minimumLength) {
                    errorMessages.push(`Required ${this.minimumLength} character.`);
                }
            }
            if (this.requireUpperCaseAndLowerCase === true) {
                if (passwordValue.search(/[A-Z a-z]/) === -1) {
                    return "Required Upper & Lower Case";
                }
            }
            if (this.requireSymbol === true) {
                if (passwordValue.search(/[!/@/#/$/%/6/&/*/(/)/_/+/./,/;/:]/) === -1) {
                    errorMessages.push("Required symbol");
                }
            }
            if (this.requireNumber === true) {
                if (passwordValue.search(/[0-9]/) === -1) {
                    errorMessages.push("Required numeric value");
                }
            }
            if (this.confirmPasswordRequired) {
                if (passwordValue !== this.confirmPassword) {
                    errorMessages.push("Passwords does not match");
                }
            }
            return errorMessages;
        }
    };
}
exports.PasswordFormControl = PasswordFormControl;
function XPasswordBoxEditUI(props) {
    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [props.editMe.renderBaseDataControlEditor(), props.editMe.renderTextControlBasePropertyEditor(), props.editMe.renderTextStyleSelectionEditor(), (0, jsx_runtime_1.jsx)(PropertyEditorBoolean_1.PropertyEditorBoolean, { label: "Confirm Password", updateCallback: props.editMe.controlUpdate, propertyName: "confirmPasswordRequired", editObject: props.editMe }), (0, jsx_runtime_1.jsx)(CommonStyled_1.StyledInputLabel, { children: "Password rules" }), (0, jsx_runtime_1.jsx)(PropertyEditorBoolean_1.PropertyEditorBoolean, { label: "Require Upper and Lower Case", updateCallback: props.editMe.controlUpdate, propertyName: "requireUpperCaseAndLowerCase", editObject: props.editMe }), (0, jsx_runtime_1.jsx)(PropertyEditorBoolean_1.PropertyEditorBoolean, { label: "Require Number", updateCallback: props.editMe.controlUpdate, propertyName: "requireNumber", editObject: props.editMe }), (0, jsx_runtime_1.jsx)(PropertyEditorBoolean_1.PropertyEditorBoolean, { label: "Require Symbol", updateCallback: props.editMe.controlUpdate, propertyName: "requireSymbol", editObject: props.editMe }), (0, jsx_runtime_1.jsx)(PropertyEditorBoolean_1.PropertyEditorBoolean, { label: "Minimum Length", updateCallback: props.editMe.controlUpdate, propertyName: "requireMinLength", editObject: props.editMe }), (0, jsx_runtime_1.jsx)(core_1.Collapse, { in: props.editMe.requireMinLength, children: (0, jsx_runtime_1.jsx)(PropertyEditorInteger_1.PropertyEditorInteger, { label: "Minimum Length", updateCallback: props.editMe.controlUpdate, propertyName: "minimumLength", editObject: props.editMe }) })] }));
}
const StyledTextFieldWrap = styled_components_1.default.div `
    width: ${({ width }) => width} !important;
    height: 100% !important;
    box-sizing: border-box !important;
    position: relative !important;

    margin-top: ${({ marginTop }) => marginTop || 0}px;
`;
//# sourceMappingURL=PasswordFormControl.js.map