import * as tslib_1 from "tslib";
import React from 'react';
import { observer } from 'xmobx/mobx-react';
import { FormState, ObserverForm } from '@skava/packages/ui/forms';
import { CancelContinueButtonGroup } from '@skava/packages/ui';
import { wording as resetByPhoneLabels } from '../fixture';
const wording = resetByPhoneLabels.resetByPhone;
class CreateNewPasswordFormContainer extends FormState {
    constructor() {
        super(...arguments);
        this.name = 'CreateNewPasswordFormData';
        this.inputsList = [
            {
                identity: 'password',
                type: 'password',
                value: '',
                className: 'create-password',
                name: 'password',
                animatePlaceholder: true,
                placeholderText: wording.createpassword,
                maxLength: 50,
                wrapperClassName: 'create-new-password-container',
                validationType: 'password',
                errorMessageFor: 'password',
                ariaLabel: wording.createpassword,
            },
            {
                identity: 'confirmPassword',
                type: 'password',
                value: '',
                className: 'confirm-password',
                name: 'confirmPassword',
                animatePlaceholder: true,
                placeholderText: wording.confirmpassword,
                maxLength: 20,
                wrapperClassName: 'register-confirm-password-container',
                validationType: 'confirmPassword',
                errorMessageFor: 'confirmPassword',
                ariaLabel: wording.confirmpassword,
            },
            {
                identity: 'otp',
                type: 'password',
                value: '',
                className: 'one-time-password',
                name: 'otp',
                animatePlaceholder: true,
                placeholderText: wording.otp,
                maxLength: 20,
                wrapperClassName: 'one-time-password-container',
                validationType: 'required',
                errorMessageFor: 'otp',
                ariaLabel: wording.otp,
            },
        ];
    }
}
const createNewPasswordFormContainer = new CreateNewPasswordFormContainer();
let CreateNewPasswordForm = class CreateNewPasswordForm extends ObserverForm {
    constructor() {
        super(...arguments);
        this.handleSubmit = (event) => {
            // event.persist()
            event.preventDefault();
            if (this.validateForm()) {
                const serialized = this.state.toSerialized();
                console.debug(serialized);
            }
            else {
                console.debug('Form has invalid inputs!');
            }
        };
    }
    render() {
        return (React.createElement(this.Form, { setRef: this.state.setFormReference },
            this.renderInputList(),
            React.createElement(CancelContinueButtonGroup, { cancelText: wording.cancel, continueText: wording.resetPassword, onContinue: this.handleSubmit, onCancel: this.props.onCancel })));
    }
};
// static propTypes = {
//   state: obj,
//   // or is it onClose?
//   onClose: func.isRequired,
//   onCancel: func.isRequired,
// }
CreateNewPasswordForm.defaultProps = {
    state: createNewPasswordFormContainer,
};
CreateNewPasswordForm = tslib_1.__decorate([
    observer
], CreateNewPasswordForm);
export { CreateNewPasswordForm as CreateNewPasswordFormForPhone };
export default CreateNewPasswordForm;
//# sourceMappingURL=ResetPasswordByPhone.js.map