"use strict";
exports.__esModule = true;
exports.ContentBuilderTemplate = exports.schemaLetsTalkAll = void 0;
var tslib_1 = require("tslib");
// @ts-nocheck
require("./ContentBuilderTemplate.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"));
var IconArrowRight_1 = require("../../../icons/IconArrowRight/IconArrowRight");
var PropsWithAsAttributes_1 = require("../../../utils/types/PropsWithAsAttributes");
var Article_1 = require("../../Article/Article");
var Button_1 = require("../../Button/Button");
var Checkbox_1 = require("../../Checkbox/Checkbox");
var usePropsHandler_1 = require("../../EventInterceptor/usePropsHandler");
var Form_1 = require("../../Form/Form");
var Grid_1 = require("../../Grid/Grid");
var MemberCard_1 = require("../../MemberCard/MemberCard");
var Modal_1 = require("../../Modal/Modal");
var Mq_1 = require("../../Mq/Mq");
var TextField_1 = require("../../TextField/TextField");
var Typography_1 = require("../../Typography/Typography");
var index_1 = require("./index");
yup.addMethod(yup.string, 'integer', function () {
    return this.matches(/^\d+$/, 'The field should have digits only');
});
var schemaLetsTalkAll = function (phoneError, emailError, requiredError) {
    return yup.object({
        name: yup
            .string()
            .min(3)
            .nullable(),
        phone: yup
            .string()
            .integer()
            .min(6)
            .max(20)
            .nullable()
            .required(requiredError),
        company: yup
            .string()
            .min(3)
            .nullable(),
        email: yup
            .string()
            .email(emailError)
            .required(requiredError)
            .nullable(),
        additionalInfo: yup
            .string()
            .min(3)
            .nullable(),
        privacyAgreement: yup
            .boolean()
            .oneOf([true], 'on')
            .required()
    });
};
exports.schemaLetsTalkAll = schemaLetsTalkAll;
exports.ContentBuilderTemplate = (0, PropsWithAsAttributes_1.forwardRefWithAs)(function (props, ref) {
    var _a = (0, usePropsHandler_1.usePropsHandler)((0, index_1.cnContentBuilderTemplate)(), props), type = _a.type, title = _a.title, text = _a.text, member = _a.member, aliases = _a.aliases, phoneError = _a.phoneError, emailError = _a.emailError, requiredError = _a.requiredError, onSubmitForm = _a.onSubmitForm, pageId = _a.pageId, recaptchaKey = _a.recaptchaKey, dictionariesForm = _a.dictionariesForm;
    var typeNumber = type.toString();
    var _b = (0, tslib_1.__read)((0, react_1.useState)(false), 2), successForm = _b[0], setSuccessForm = _b[1];
    var schemaAll = (0, exports.schemaLetsTalkAll)(phoneError, emailError, requiredError);
    var reCaptchaRef = (0, react_1.useRef)(null);
    var initialValues = {
        name: '',
        phone: '',
        company: '',
        email: '',
        additionalInfo: '',
        privacyAgreement: false
    };
    var 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:
                    if (!onSubmitForm) return [3 /*break*/, 4];
                    token = null;
                    if (!recaptchaKey) return [3 /*break*/, 2];
                    return [4 /*yield*/, reCaptchaRef.current.executeAsync()];
                case 1:
                    token = _a.sent();
                    _a.label = 2;
                case 2: return [4 /*yield*/, onSubmitForm((0, tslib_1.__assign)({ pageId: pageId, token: token }, values))
                        .then(function () {
                        setSuccessForm(true);
                        actions.resetForm();
                    })["catch"](function () { return alert('error, look at network'); })];
                case 3:
                    _a.sent();
                    _a.label = 4;
                case 4: return [2 /*return*/];
            }
        });
    }); };
    return (react_1["default"].createElement("div", { className: (0, index_1.cnContentBuilderTemplate)({ type: typeNumber }) },
        react_1["default"].createElement(Grid_1.Grid, { breakpoints: {
                desktop: { cols: 12, gap: 'xl' },
                tablet: { cols: 8, gap: 'm' }
            } },
            react_1["default"].createElement(Grid_1.GridItem, { breakpoints: { desktop: { col: 5 }, tablet: { col: 4 } }, className: (0, index_1.cnContentBuilderTemplate)('Left') },
                title && react_1["default"].createElement(Typography_1.Typography.Title, { size: "md", dangerouslySetInnerHTML: { __html: title } }),
                text && react_1["default"].createElement(Article_1.Article, { content: text }),
                member && (react_1["default"].createElement(Mq_1.Mq, { query: "--tablet-min" },
                    react_1["default"].createElement(MemberCard_1.MemberCard, (0, tslib_1.__assign)({}, member, { view: "ghost", routePath: aliases.TEAM_MEMBER, socials: true }))))),
            react_1["default"].createElement(Grid_1.GridItem, { breakpoints: { desktop: { col: 6, colStart: 7 }, tablet: { col: 4 } }, className: 'GridItem-Form' },
                react_1["default"].createElement(Form_1.Form, { enableReinitialize: true, initialValues: initialValues, validationSchema: schemaAll, onSubmit: onSubmit }, function (_a) {
                    var isSubmitting = _a.isSubmitting, errors = _a.errors, dirty = _a.dirty, handleBlur = _a.handleBlur, handleChange = _a.handleChange, values = _a.values, touched = _a.touched;
                    return (react_1["default"].createElement(Form_1.FormBody, { className: (0, index_1.cnContentBuilderTemplate)('Form', {}) },
                        react_1["default"].createElement("div", { className: (0, index_1.cnContentBuilderTemplate)('Inner') },
                            react_1["default"].createElement("div", { className: (0, index_1.cnContentBuilderTemplate)('Body') },
                                react_1["default"].createElement(TextField_1.TextField, { name: "name", onChange: function (_a) {
                                        var e = _a.e;
                                        return handleChange(e);
                                    }, onBlur: handleBlur, value: values.name, label: dictionariesForm.name.label, view: "outline", width: "full", caption: touched.name && errors.name, status: touched.name && !!errors.name && 'alert' }),
                                react_1["default"].createElement(TextField_1.TextField, { name: "phone", required: true, onChange: function (_a) {
                                        var e = _a.e;
                                        return handleChange(e);
                                    }, onBlur: handleBlur, value: values.phone, label: dictionariesForm.phone.label, view: "outline", width: "full", type: "tel", caption: touched.phone && errors.phone, status: touched.phone && !!errors.phone && 'alert' }),
                                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: dictionariesForm.company.label, view: "outline", width: "full", caption: touched.company && errors.company, status: touched.company && !!errors.company && 'alert' }),
                                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: dictionariesForm.email.label, view: "outline", width: "full", required: true, caption: touched.email && errors.email, status: touched.email && !!errors.email && 'alert' }),
                                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: dictionariesForm.addInfo.label, view: "outline", width: "full", caption: touched.additionalInfo && errors.additionalInfo, status: touched.additionalInfo && !!errors.additionalInfo && 'alert' })),
                            react_1["default"].createElement("div", { className: (0, index_1.cnContentBuilderTemplate)('Bottom') },
                                react_1["default"].createElement("div", { className: (0, index_1.cnContentBuilderTemplate)('Checkbox') },
                                    react_1["default"].createElement(Checkbox_1.Checkbox, { required: true, label: dictionariesForm.policy, name: "privacyAgreement", onChange: function (_a) {
                                            var e = _a.e;
                                            return handleChange(e);
                                        }, onBlur: handleBlur, checked: values.privacyAgreement })),
                                react_1["default"].createElement("div", { className: (0, index_1.cnContentBuilderTemplate)('Button') },
                                    react_1["default"].createElement(Button_1.Button, { iconRight: IconArrowRight_1.IconArrowRight, disabled: isSubmitting || !!Object.keys(errors).length || !dirty, label: dictionariesForm.button, type: "submit" }),
                                    recaptchaKey && (react_1["default"].createElement(react_google_recaptcha_1["default"], { ref: reCaptchaRef, sitekey: recaptchaKey, 
                                        // onChange={value => {
                                        //   console.log('$$$$', isSubmitting, value);
                                        //   setSubmitting(false);
                                        // }}
                                        size: "invisible" })))))));
                }),
                react_1["default"].createElement(Modal_1.Modal, { view: "secondary", hasOverlay: true, onOpen: function () {
                        document.body.style.overflow = 'hidden';
                    }, onClose: function () {
                        document.body.style.overflow = 'unset';
                    }, isOpen: successForm, onOverlayClick: function () {
                        setSuccessForm(false);
                        document.body.style.overflow = 'unset';
                    }, onEsc: function () {
                        setSuccessForm(false);
                        document.body.style.overflow = 'unset';
                    }, showCloseButton: true, inverted: true },
                    react_1["default"].createElement("div", { className: (0, index_1.cnContentBuilderTemplate)('ModalSuccess') },
                        dictionariesForm.success && (react_1["default"].createElement(Typography_1.Typography.Title, { size: "lg", className: (0, index_1.cnContentBuilderTemplate)('ModalSuccess-Title') }, dictionariesForm.success.title)),
                        dictionariesForm.success && (react_1["default"].createElement(Typography_1.Typography.Text, { className: (0, index_1.cnContentBuilderTemplate)('ModalSuccess-SubTitle') }, dictionariesForm.success.text))))),
            member && (react_1["default"].createElement(Grid_1.GridItem, { breakpoints: { desktop: { col: 5 }, tablet: { col: 4 } } },
                react_1["default"].createElement(Mq_1.Mq, { query: "--mobile" },
                    react_1["default"].createElement(MemberCard_1.MemberCard, (0, tslib_1.__assign)({}, member, { view: "ghost", routePath: aliases.TEAM_MEMBER, socials: true }))))))));
});
exports["default"] = exports.ContentBuilderTemplate;
