import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import styled from "styled-components";
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";
import { ValidationIssue } from "../../Common/IDesignValidationProvider";
import { Collapse, IconButton } from "@material-ui/core";
import { PropertyEditorBoolean } from "../../CommonUI/PropertyEditing/PropertyEditorBoolean";
import { PropertyEditorInteger } from "../../CommonUI/PropertyEditing/PropertyEditorInteger";
import { ShowIcon } from "../../CommonUI/Icon/ShowIcon";
import { HideIcon } from "../../CommonUI/Icon/HideIcon";
import { ObserveState } from "../../CommonUI/StateManagement/ObserveState";
import { StateManager } from "../../CommonUI/StateManagement/StateManager";
export class XPasswordBox extends BaseTextEntryControl {
    constructor() {
        super(...arguments);
        // options
        this.requireMinLength = false;
        this.requireUpperCaseAndLowerCase = false;
        this.requireNumber = false;
        this.requireSymbol = false;
        this.confirmPasswordRequired = false;
        this.minimumLength = 3;
        this.confirmPassword = '';
        this.isMask = true;
        this.gapWithConfirmPassword = 10;
        this.showPassword = () => {
            this.isMask = !this.isMask;
            StateManager.propertyChanged(this, 'isMask');
        };
        this.handleChange = (event) => {
            if (this.valueName) {
                this.setFormDataValue(this.valueName, event.currentTarget.value);
            }
        };
        this.getValue = () => {
            return this.valueName ? this.getFormDataValue(this.valueName) : "";
        };
        this.handleConfirmPasswordChange = (event) => {
            if (this.getValue() && this.getValue() !== '') {
                this.confirmPassword = event.currentTarget.value;
                StateManager.propertyChanged(this, 'confirmPassword');
                // todo: fix
                this.setFormDataValue(this.valueName, this.getValue());
            }
        };
        this.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) {
                    console.log('Comparing', passwordValue, this.confirmPassword);
                    if (passwordValue !== this.confirmPassword) {
                        errorMessages.push('Passwords does not match');
                    }
                }
                return errorMessages;
            }
        };
    }
    getRuntimeValidationIssues() {
        const runtimeIssues = super.getRuntimeValidationIssues();
        const validationPasswordIssues = this.validatePassword();
        if (validationPasswordIssues) {
            for (let val of validationPasswordIssues) {
                runtimeIssues.push(new ValidationIssue(val, this.valueName, this.id));
            }
        }
        return runtimeIssues;
    }
    render() {
        return _jsx(ObserveState, { listenTo: this, properties: ['isMask', 'confirmPassword'], control: () => {
                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';
                let content = null;
                switch (style) {
                    case TextControlStyle.LABELED:
                        content = (_jsxs(_Fragment, { children: [_jsxs(StyledTextFieldWrap, Object.assign({ width: customWidth }, { children: [this.label && (_jsx(StyledInputLabel, Object.assign({ "data-role": TextControlStyle.LABELED }, { children: this.label }), void 0)),
                                        _jsx(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: (_jsx(IconButton, Object.assign({ onClick: this.showPassword }, { children: this.isMask ? _jsx(ShowIcon, {}, void 0) : _jsx(HideIcon, {}, void 0) }), void 0)),
                                                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 || 'textfield'}-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 || 'textfield'}-hinttext` }, { children: issueText ? issueText : this.hintText }), void 0))] }), void 0),
                                this.confirmPasswordRequired && _jsxs(StyledTextFieldWrap, Object.assign({ width: customWidth, marginTop: this.gapWithConfirmPassword }, { children: [this.label && (_jsxs(StyledInputLabel, Object.assign({ "data-role": TextControlStyle.LABELED }, { children: ["Confirm ", this.label] }), void 0)),
                                        _jsx(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
                                            } }, 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 || 'textfield'}-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 || 'textfield'}-hinttext` }, { children: issueText ? issueText : this.hintText }), void 0))] }), void 0)] }, void 0));
                        break;
                    case TextControlStyle.SHADED:
                        content = (_jsxs(_Fragment, { children: [_jsxs(StyledTextFieldWrap, Object.assign({ width: customWidth }, { children: [_jsx(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: (_jsx(IconButton, Object.assign({ onClick: this.showPassword }, { children: this.isMask ? _jsx(ShowIcon, {}, void 0) : _jsx(HideIcon, {}, void 0) }), void 0)),
                                                inputRef: this.ref
                                            } }, void 0),
                                        (issueText || this.hintText) && (_jsx(StyledFormHelperText, Object.assign({ error: Boolean(issueText), "data-testid": `${this.valueName || 'textfield'}-hinttext` }, { children: issueText ? issueText : this.hintText }), void 0))] }), void 0),
                                this.confirmPasswordRequired && _jsxs(StyledTextFieldWrap, Object.assign({ width: customWidth, marginTop: this.gapWithConfirmPassword }, { children: [_jsx(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
                                            } }, void 0),
                                        (issueText || this.hintText) && (_jsx(StyledFormHelperText, Object.assign({ error: Boolean(issueText), "data-testid": `${this.valueName || 'textfield'}-hinttext` }, { children: issueText ? issueText : this.hintText }), void 0))] }), void 0)] }, void 0));
                        break;
                    case TextControlStyle.UNDERLINED:
                        content = (_jsxs(_Fragment, { children: [_jsxs(StyledTextFieldWrap, Object.assign({ width: customWidth }, { children: [_jsx(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: (_jsx(IconButton, Object.assign({ onClick: this.showPassword }, { children: this.isMask ? _jsx(ShowIcon, {}, void 0) : _jsx(HideIcon, {}, void 0) }), void 0)),
                                                inputRef: this.ref
                                            } }, void 0),
                                        (issueText || this.hintText) && (_jsx(StyledFormHelperText, Object.assign({ error: Boolean(issueText), "data-testid": `${this.valueName || 'textfield'}-hinttext` }, { children: issueText ? issueText : this.hintText }), void 0))] }), void 0),
                                this.confirmPasswordRequired && _jsxs(StyledTextFieldWrap, Object.assign({ width: customWidth, marginTop: this.gapWithConfirmPassword }, { children: [_jsx(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
                                            } }, void 0),
                                        (issueText || this.hintText) && (_jsx(StyledFormHelperText, Object.assign({ error: Boolean(issueText), "data-testid": `${this.valueName || 'textfield'}-hinttext` }, { children: issueText ? issueText : this.hintText }), void 0))] }), void 0)] }, void 0));
                        break;
                    case TextControlStyle.OUTLINE:
                        content = (_jsxs(_Fragment, { children: [_jsxs(StyledTextFieldWrap, Object.assign({ width: customWidth }, { children: [_jsx(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: (_jsx(IconButton, Object.assign({ onClick: this.showPassword }, { children: this.isMask ? _jsx(ShowIcon, {}, void 0) : _jsx(HideIcon, {}, void 0) }), void 0)),
                                                inputRef: this.ref
                                            } }, void 0),
                                        (issueText || this.hintText) && (_jsx(StyledFormHelperText, Object.assign({ error: Boolean(issueText), "data-testid": `${this.valueName || 'textfield'}-hinttext` }, { children: issueText ? issueText : this.hintText }), void 0))] }), void 0),
                                this.confirmPasswordRequired && _jsxs(StyledTextFieldWrap, Object.assign({ width: customWidth, marginTop: this.gapWithConfirmPassword }, { children: [_jsx(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
                                            } }, void 0),
                                        (issueText || this.hintText) && (_jsx(StyledFormHelperText, Object.assign({ error: Boolean(issueText), "data-testid": `${this.valueName || 'textfield'}-hinttext` }, { children: issueText ? issueText : this.hintText }), void 0))] }), void 0)] }, void 0));
                        break;
                }
                return _jsx(_Fragment, { children: content }, void 0);
            } }, void 0);
    }
    renderEditUI() {
        return _jsx(XPasswordBoxEditUI, { editMe: this }, void 0);
    }
    getAddedData() {
        if (!this.valueName)
            return;
        let def = new StringDataDefinition();
        def.name = this.valueName;
        return def;
    }
}
function XPasswordBoxEditUI(props) {
    return (_jsxs(_Fragment, { children: [props.editMe.renderBaseDataControlEditor(), props.editMe.renderTextControlBasePropertyEditor(), props.editMe.renderTextStyleSelectionEditor(), _jsx(PropertyEditorBoolean, { label: "Confirm Password", updateCallback: props.editMe.controlUpdate, propertyName: "confirmPasswordRequired", editObject: props.editMe }, void 0),
            _jsx(StyledInputLabel, { children: "Password rules" }, void 0),
            _jsx(PropertyEditorBoolean, { label: "Require Upper and Lower Case", updateCallback: props.editMe.controlUpdate, propertyName: "requireUpperCaseAndLowerCase", editObject: props.editMe }, void 0),
            _jsx(PropertyEditorBoolean, { label: "Require Number", updateCallback: props.editMe.controlUpdate, propertyName: "requireNumber", editObject: props.editMe }, void 0),
            _jsx(PropertyEditorBoolean, { label: "Require Symbol", updateCallback: props.editMe.controlUpdate, propertyName: "requireSymbol", editObject: props.editMe }, void 0),
            _jsx(PropertyEditorBoolean, { label: "Minimum Length", updateCallback: props.editMe.controlUpdate, propertyName: "requireMinLength", editObject: props.editMe }, void 0),
            _jsx(Collapse, Object.assign({ in: props.editMe.requireMinLength }, { children: _jsx(PropertyEditorInteger, { label: 'Minimum Length', updateCallback: props.editMe.controlUpdate, propertyName: "minimumLength", editObject: props.editMe }, void 0) }), void 0)] }, void 0));
}
const StyledTextFieldWrap = styled.div `
    width: ${({ width }) => width} !important;
    height: 100% !important;
    box-sizing: border-box !important;
    position: relative !important;

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