'use client';
import React, { useCallback } from 'react';
import { useTranslation } from '../../../providers/Translation/index.js';
import Error from '../../Error/index.js';
import { useFormFields } from '../../Form/context.js';
import Label from '../../Label/index.js';
import useField from '../../useField/index.js';
import { fieldBaseClass } from '../shared.js';
const ConfirmPassword = (props)=>{
    const { disabled } = props;
    const password = useFormFields(([fields])=>fields.password);
    const { i18n, t } = useTranslation();
    const validate = useCallback((value)=>{
        if (!value) {
            return t('validation:required');
        }
        if (value === password?.value) {
            return true;
        }
        return t('fields:passwordsDoNotMatch');
    }, [
        password,
        t
    ]);
    const path = 'confirm-password';
    const { errorMessage, setValue, showError, value } = useField({
        disableFormData: true,
        path,
        validate
    });
    return /*#__PURE__*/ React.createElement("div", {
        className: [
            fieldBaseClass,
            'confirm-password',
            showError && 'error'
        ].filter(Boolean).join(' ')
    }, /*#__PURE__*/ React.createElement(Error, {
        path: path
    }), /*#__PURE__*/ React.createElement(Label, {
        htmlFor: "field-confirm-password",
        label: t('authentication:confirmPassword'),
        required: true
    }), /*#__PURE__*/ React.createElement("input", {
        autoComplete: "off",
        disabled: !!disabled,
        id: "field-confirm-password",
        name: "confirm-password",
        onChange: setValue,
        type: "password",
        value: value || ''
    }));
};
export default ConfirmPassword;

//# sourceMappingURL=index.js.map