import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
import { Show, Hide } from "@feedloop/icon";
import { Box, FormControl, FormErrorMessage, Input, InputGroup, InputRightElement, } from "@chakra-ui/react";
import React from "react";
import { useToggle } from "react-use";
import { registerComponent } from "../interfaces";
import useDisableCondition from "../hooks/useDisableCondition";
import InputComponentFormLabel from "../components/InputComponentFormLabel";
var ErrorMessage;
(function (ErrorMessage) {
    ErrorMessage["COMPARISON_ERROR"] = "Confirmation password is different from password";
    ErrorMessage["LENGTH_ERROR"] = "Password must be minimal 8 characters";
})(ErrorMessage || (ErrorMessage = {}));
const PasswordInput = registerComponent("Password", {
    type: "none",
    icon: "Key",
    group: "input",
    display: "inline",
    defaultProps: {
        label: "Password",
        placeholder: "Placeholder here",
        confirmPassword: true,
        confirmLabel: "Confirm Password",
        confirmPlaceholder: "Placeholder here",
        data: {
            inputID: "Password",
            field: { type: "string", options: { format: "text" } },
            validation: {
                required: true,
            },
        },
    },
    propDefinition: {
        label: { group: "Password", type: "expression", options: {} },
        placeholder: {
            group: "Password",
            type: "expression",
            options: {},
        },
        confirmPassword: {
            group: "Confirm Password",
            type: "boolean",
            options: {},
        },
        confirmLabel: {
            group: "Confirm Password",
            type: "expression",
            options: {},
        },
        confirmPlaceholder: {
            group: "Confirm Password",
            type: "expression",
            options: {},
        },
        data: {
            group: "Design",
            type: "state",
            options: {
                inputID: "Password",
                field: {
                    type: "string",
                    options: { format: "text" },
                },
            },
        },
    },
    Component: (props) => {
        var _a, _b;
        const title = props.hooks.useEvaluate(props.properties.label);
        const confirmTitle = props.hooks.useEvaluate(props.properties.confirmLabel);
        const placeholder = props.hooks.useEvaluate(props.properties.placeholder);
        const confirmPlaceholder = props.hooks.useEvaluate(props.properties.confirmPlaceholder);
        const [showPassword, toggleShowPassword] = useToggle(false);
        const [showConfirmPassword, toggleShowConfirmPassword] = useToggle(false);
        const [confirmPassword, setConfirmPassword] = React.useState(undefined);
        const validate = React.useCallback((value) => {
            if (typeof value === "undefined") {
                return { error: "" };
            }
            else if (value.length < 8) {
                return { error: ErrorMessage.LENGTH_ERROR };
            }
            else if (props.properties.confirmPassword) {
                if (!confirmPassword || confirmPassword !== value) {
                    return { error: ErrorMessage.COMPARISON_ERROR };
                }
            }
        }, [confirmPassword, props.properties.confirmPassword]);
        const data = props.hooks.useRuntimeInput(props.properties.data, props.data.page.row, {
            validate: validate,
        });
        const handlePasswordChange = React.useCallback((e) => {
            data.onChange(e.currentTarget.value);
        }, []);
        const handleConfirmPasswordChange = React.useCallback((e) => {
            setConfirmPassword(e.currentTarget.value);
        }, []);
        // @ts-ignore
        const { isDisabled } = useDisableCondition(props.instance);
        const disabledProperties = {
            border: "1px solid rgb(226, 232, 240)",
            pointerEvents: isDisabled ? "none" : "auto",
            background: isDisabled && "#E7E7E7",
            color: isDisabled && "#A2A2A2",
        };
        return (_jsxs(Box, { children: [_jsxs(FormControl, Object.assign({ isInvalid: !!data.validation.error }, { children: [_jsx(InputComponentFormLabel, { title: title, name: "password", instanceId: props.instance.id, fontWeight: "normal", isRequired: (_a = props.properties.data.validation) === null || _a === void 0 ? void 0 : _a.required, isEmpty: title.length === 0 }), _jsxs(InputGroup, { children: [_jsx(Input, { placeholder: placeholder, bgColor: "surface.900", name: props.properties.data.inputID, type: showPassword ? "text" : "password", defaultValue: data.value, onChange: handlePasswordChange, style: disabledProperties, _focus: { shadow: "0px" }, "data-test": "password-input" }, props.properties.data.inputID), _jsx(InputRightElement, Object.assign({ cursor: "pointer", onClick: toggleShowPassword, "data-test": "password-toggle", style: disabledProperties }, { children: !showPassword ? _jsx(Show, {}) : _jsx(Hide, {}) }))] }), !!data.validation.error && (_jsx(FormErrorMessage, { children: data.validation.error === ErrorMessage.LENGTH_ERROR
                                ? data.validation.error
                                : "" }))] })), props.properties.confirmPassword && (_jsxs(FormControl, Object.assign({ paddingTop: 4, isInvalid: !!data.validation.error }, { children: [_jsx(InputComponentFormLabel, { title: confirmTitle, name: "confirm-password", instanceId: props.instance.id, fontWeight: "normal", isRequired: (_b = props.properties.data.validation) === null || _b === void 0 ? void 0 : _b.required, isEmpty: confirmTitle.length === 0 }), _jsxs(InputGroup, { children: [_jsx(Input, { placeholder: confirmPlaceholder, bgColor: "surface.900", name: props.properties.data.inputID + "confirmPassword", type: showConfirmPassword ? "text" : "password", defaultValue: confirmPassword, onChange: handleConfirmPasswordChange, style: disabledProperties, _focus: { shadow: "0px" }, "data-test": "password-confirm-input" }, props.properties.data.inputID + "confirmPassword"), _jsx(InputRightElement, Object.assign({ cursor: "pointer", onClick: toggleShowConfirmPassword, "data-test": "password-confirm-toggle", style: disabledProperties }, { children: !showConfirmPassword ? _jsx(Show, {}) : _jsx(Hide, {}) }))] }), !!data.validation.error && (_jsx(FormErrorMessage, { children: data.validation.error === ErrorMessage.COMPARISON_ERROR
                                ? data.validation.error
                                : "" }))] })))] }));
    },
});
export default PasswordInput;
//# sourceMappingURL=buildPassword.js.map