"use strict";
exports.__esModule = true;
exports.FileCardForm = exports.schemaLetsTalk = void 0;
var tslib_1 = require("tslib");
// @ts-nocheck
require("./FileCardForm.css");
var react_1 = (0, tslib_1.__importStar)(require("react"));
var react_google_recaptcha_1 = (0, tslib_1.__importDefault)(require("react-google-recaptcha"));
var yup = (0, tslib_1.__importStar)(require("yup"));
require("yup-phone");
var IconArrowRight_1 = require("../../icons/IconArrowRight/IconArrowRight");
var bem_1 = require("../../utils/bem");
var Button_1 = require("../Button/Button");
var Checkbox_1 = require("../Checkbox/Checkbox");
var Form_1 = require("../Form/Form");
var Grid_1 = require("../Grid/Grid");
var TextField_1 = require("../TextField/TextField");
yup.addMethod(yup.string, 'integer', function () {
    return this.matches(/^\d+$/, 'The field should have digits only');
});
var schemaLetsTalk = function (phoneError, emailError, requiredError) { return [
    yup.object({
        email: yup
            .string()
            .email(emailError)
            .required(requiredError)
            .nullable(),
        privacyAgreement: yup
            .boolean()
            .oneOf([true], 'on')
            .required()
    }),
    yup.object({
        name: yup
            .string()
            .min(3)
            .required()
            .nullable(),
        email: yup
            .string()
            .email(emailError)
            .required(requiredError)
            .nullable(),
        privacyAgreement: yup
            .boolean()
            .oneOf([true], 'on')
            .required()
    }),
    yup.object({
        name: yup
            .string()
            .min(3)
            .required()
            .nullable(),
        email: yup
            .string()
            .min(3)
            .email(emailError)
            .required(requiredError)
            .nullable(),
        phone: yup
            .string()
            .nullable()
            .integer()
            .min(6)
            .max(20)
            .required(),
        company: yup
            .string()
            .min(3)
            .nullable(),
        additionalInfo: yup
            .string()
            .min(3)
            .nullable(),
        privacyAgreement: yup
            .boolean()
            .oneOf([true], 'on')
            .required()
    }),
]; };
exports.schemaLetsTalk = schemaLetsTalk;
var cnFileCardForm = (0, bem_1.cn)('FileCardForm');
var FileCardForm = function (_a, ref) {
    var onSubmit = _a.onSubmit, _b = _a.type, type = _b === void 0 ? 0 : _b, url = _a.url, dictionaries = _a.dictionaries, recaptchaKey = _a.recaptchaKey;
    var initialValues = {
        name: '',
        phone: '',
        company: '',
        email: '',
        additionalInfo: '',
        privacyAgreement: false
    };
    var reCaptchaRef = (0, react_1.useRef)(null);
    var schema = (0, exports.schemaLetsTalk)();
    return (react_1["default"].createElement(react_1["default"].Fragment, null,
        react_1["default"].createElement(Form_1.Form, { enableReinitialize: true, initialValues: initialValues, validationSchema: schema[type], onSubmit: function (values, actions) { return (0, tslib_1.__awaiter)(void 0, void 0, void 0, function () {
                var token;
                return (0, tslib_1.__generator)(this, function (_a) {
                    switch (_a.label) {
                        case 0:
                            token = null;
                            if (!recaptchaKey) return [3 /*break*/, 2];
                            return [4 /*yield*/, reCaptchaRef.current.executeAsync()];
                        case 1:
                            token = _a.sent();
                            _a.label = 2;
                        case 2:
                            onSubmit((0, tslib_1.__assign)((0, tslib_1.__assign)({}, values), { token: token }), actions);
                            return [2 /*return*/];
                    }
                });
            }); } }, function (_a) {
            var isSubmitting = _a.isSubmitting, errors = _a.errors, handleChange = _a.handleChange, handleBlur = _a.handleBlur, values = _a.values, touched = _a.touched, dirty = _a.dirty;
            return (react_1["default"].createElement(Form_1.FormBody, { className: cnFileCardForm({ type: type }) },
                react_1["default"].createElement("div", { className: cnFileCardForm('Inner') },
                    react_1["default"].createElement("div", { className: cnFileCardForm('Body') },
                        react_1["default"].createElement(Grid_1.Grid, { breakpoints: {
                                desktop: { cols: type === 2 ? 2 : 1, gap: 'xl' },
                                tablet: { cols: 1, gap: 'xl' },
                                mobile: { cols: 1, gap: 'xl' }
                            } },
                            (type === 1 || type === 2) && (react_1["default"].createElement(Grid_1.GridItem, null,
                                react_1["default"].createElement(TextField_1.TextField, { name: "name", required: true, onChange: function (_a) {
                                        var e = _a.e;
                                        return handleChange(e);
                                    }, onBlur: handleBlur, value: values.name, label: "Name", view: "outline", width: "full", caption: touched.name && errors.name, status: touched.name && !!errors.name && 'alert' }))),
                            type === 2 && (react_1["default"].createElement(react_1["default"].Fragment, null,
                                react_1["default"].createElement(Grid_1.GridItem, null,
                                    react_1["default"].createElement(TextField_1.TextField, { name: "company", onChange: function (_a) {
                                            var e = _a.e;
                                            return handleChange(e);
                                        }, onBlur: handleBlur, value: values.company, label: dictionaries.companySiteFormDownloadFile
                                            .companySiteFormDownloadFileCompany, view: "outline", width: "full", type: "tel", caption: touched.company && errors.company, status: touched.company && !!errors.company && 'alert' })),
                                react_1["default"].createElement(Grid_1.GridItem, null,
                                    react_1["default"].createElement(TextField_1.TextField, { name: "phone", onChange: function (_a) {
                                            var e = _a.e;
                                            return handleChange(e);
                                        }, onBlur: handleBlur, value: values.phone, label: dictionaries.companySiteFormDownloadFile
                                            .companySiteFormDownloadFilePhone, view: "outline", width: "full", type: "tel", required: true, caption: touched.phone && errors.phone, status: touched.phone && !!errors.phone && 'alert' })))),
                            react_1["default"].createElement(Grid_1.GridItem, null,
                                react_1["default"].createElement(TextField_1.TextField, { name: "email", onChange: function (_a) {
                                        var e = _a.e;
                                        return handleChange(e);
                                    }, onBlur: handleBlur, value: values.email, label: dictionaries.companySiteFormDownloadFile.companySiteFormDownloadFileEmail, view: "outline", width: "full", required: true, caption: touched.email && errors.email, status: touched.email && !!errors.email && 'alert' })),
                            type === 2 && (react_1["default"].createElement(Grid_1.GridItem, null,
                                react_1["default"].createElement(TextField_1.TextField, { name: "additionalInfo", onChange: function (_a) {
                                        var e = _a.e;
                                        return handleChange(e);
                                    }, onBlur: handleBlur, value: values.additionalInfo, label: dictionaries.companySiteFormDownloadFile
                                        .companySiteFormDownloadFileAddInfo, view: "outline", width: "full", caption: touched.additionalInfo && errors.additionalInfo, status: touched.additionalInfo && !!errors.additionalInfo && 'alert' }))),
                            react_1["default"].createElement(Grid_1.GridItem, null,
                                react_1["default"].createElement("div", { className: cnFileCardForm('Bottom') },
                                    react_1["default"].createElement(Checkbox_1.Checkbox, { required: true, label: dictionaries.companySiteFormDownloadFile
                                            .companySiteFormDownloadFileSubscribePolicy, name: "privacyAgreement", onChange: function (_a) {
                                            var e = _a.e;
                                            return handleChange(e);
                                        }, onBlur: handleBlur, checked: values.privacyAgreement }),
                                    react_1["default"].createElement(Button_1.Button, { iconRight: IconArrowRight_1.IconArrowRight, disabled: isSubmitting || !dirty || !!Object.keys(errors).length, label: dictionaries.companySiteFormDownloadFile
                                            .companySiteFormDownloadFileSubmit, type: "submit" }))))),
                    recaptchaKey && (react_1["default"].createElement(react_google_recaptcha_1["default"], { ref: reCaptchaRef, sitekey: recaptchaKey, size: "invisible" })))));
        })));
};
exports.FileCardForm = FileCardForm;
