"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");
var schemaLetsTalkAll = function (emailError, requiredError) {
    return yup.object({
        firstName: yup
            .string()
            .min(3)
            .nullable(),
        email: yup
            .string()
            .email(emailError)
            .required(requiredError)
            .nullable(),
        message: yup
            .string()
            .min(3)
            .nullable(),
        lastName: 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, emailError = _a.emailError, requiredError = _a.requiredError, onSubmitForm = _a.onSubmitForm, pageId = _a.pageId, titleSuccessForm3 = _a.titleSuccessForm3, textSuccessForm3 = _a.textSuccessForm3, recaptchaKey = _a.recaptchaKey;
    var typeNumber = type.toString();
    var _b = (0, tslib_1.__read)((0, react_1.useState)(false), 2), successForm = _b[0], setSuccessForm = _b[1];
    var reCaptchaRef = (0, react_1.useRef)(null);
    var schemaAll = (0, exports.schemaLetsTalkAll)(emailError, requiredError);
    var initialValues = {
        firstName: '',
        lastName: '',
        email: '',
        message: '',
        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: "lg", 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, validateOnChange: true }, function (_a) {
                    var isSubmitting = _a.isSubmitting, errors = _a.errors, dirty = _a.dirty, handleChange = _a.handleChange, handleBlur = _a.handleBlur, 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: "firstName", onChange: function (_a) {
                                        var e = _a.e;
                                        return handleChange(e);
                                    }, onBlur: handleBlur, value: values.firstName, label: 'First Name', view: "outline", width: "full", caption: touched.firstName && errors.firstName, status: touched.firstName && !!errors.firstName && 'alert' }),
                                react_1["default"].createElement(TextField_1.TextField, { name: "lastName", onChange: function (_a) {
                                        var e = _a.e;
                                        return handleChange(e);
                                    }, onBlur: handleBlur, value: values.lastName, label: 'Last Name', view: "outline", width: "full", caption: touched.lastName && errors.lastName, status: touched.lastName && !!errors.lastName && '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: 'E-mail', 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: "message", onChange: function (_a) {
                                        var e = _a.e;
                                        return handleChange(e);
                                    }, onBlur: handleBlur, value: values.message, label: 'What are your Stripe needs?', view: "outline", width: "full", caption: touched.message && errors.message, status: touched.message && !!errors.message && '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: 'I agree to the Privacy Policy.', onChange: function (_a) {
                                            var e = _a.e;
                                            return handleChange(e);
                                        }, onBlur: handleBlur, name: "privacyAgreement", 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: 'Submit', 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') },
                        react_1["default"].createElement(Typography_1.Typography.Title, { size: "lg", className: (0, index_1.cnContentBuilderTemplate)('ModalSuccess-Title') }, titleSuccessForm3),
                        react_1["default"].createElement(Typography_1.Typography.Text, { className: (0, index_1.cnContentBuilderTemplate)('ModalSuccess-SubTitle') }, textSuccessForm3)))),
            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;
