import { __assign, __awaiter, __generator, __read } from "tslib";
// @ts-nocheck
import './ContentBuilderTemplate.css';
import React, { useRef, useState } from 'react';
import ReCAPTCHA from 'react-google-recaptcha';
import * as yup from 'yup';
import { IconArrowRight } from '../../../icons/IconArrowRight/IconArrowRight';
import { forwardRefWithAs } from '../../../utils/types/PropsWithAsAttributes';
import { Article } from '../../Article/Article';
import { Button } from '../../Button/Button';
import { Checkbox } from '../../Checkbox/Checkbox';
import { usePropsHandler } from '../../EventInterceptor/usePropsHandler';
import { Form, FormBody } from '../../Form/Form';
import { Grid, GridItem } from '../../Grid/Grid';
import { MemberCard } from '../../MemberCard/MemberCard';
import { Modal } from '../../Modal/Modal';
import { Mq } from '../../Mq/Mq';
import { TextField } from '../../TextField/TextField';
import { Typography } from '../../Typography/Typography';
import { cnContentBuilderTemplate } from './index';
export 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()
    });
};
export var ContentBuilderTemplate = forwardRefWithAs(function (props, ref) {
    var _a = usePropsHandler(cnContentBuilderTemplate(), props), type = _a.type, title = _a.title, text = _a.text, member = _a.member, aliases = _a.aliases, onSubmitForm = _a.onSubmitForm, pageId = _a.pageId, recaptchaKey = _a.recaptchaKey, dictionariesForm = _a.dictionariesForm;
    var typeNumber = type.toString();
    var _b = __read(useState(false), 2), successForm = _b[0], setSuccessForm = _b[1];
    var reCaptchaRef = useRef(null);
    var schemaAll = schemaLetsTalkAll(dictionariesForm.email.error, dictionariesForm.required);
    var initialValues = {
        firstName: '',
        lastName: '',
        email: '',
        message: '',
        privacyAgreement: false
    };
    var onSubmit = function (values, actions) { return __awaiter(void 0, void 0, void 0, function () {
        var token;
        return __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(__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.createElement("div", { className: cnContentBuilderTemplate({ type: typeNumber, noMember: !member }) },
        React.createElement(Grid, { breakpoints: {
                desktop: { cols: 12, gap: 'xl' },
                tablet: { cols: 8, gap: 'm' }
            } },
            React.createElement(GridItem, { breakpoints: { desktop: { col: 5 }, tablet: { col: 4 } }, className: cnContentBuilderTemplate('Left') },
                title && React.createElement(Typography.Title, { size: "lg", dangerouslySetInnerHTML: { __html: title } }),
                text && React.createElement(Article, { content: text }),
                member && (React.createElement(Mq, { query: "--tablet-min" },
                    React.createElement(MemberCard, __assign({}, member, { view: "ghost", routePath: aliases.TEAM_MEMBER, socials: true }))))),
            React.createElement(GridItem, { breakpoints: { desktop: { col: 6, colStart: 7 }, tablet: { col: 4 } }, className: "GridItem-Form" },
                React.createElement(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.createElement(FormBody, { className: cnContentBuilderTemplate('Form') },
                        React.createElement("div", { className: cnContentBuilderTemplate('Inner') },
                            React.createElement("div", { className: cnContentBuilderTemplate('Body') },
                                React.createElement(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.createElement(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.createElement(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.createElement(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.createElement("div", { className: cnContentBuilderTemplate('Bottom') },
                                React.createElement("div", { className: cnContentBuilderTemplate('Checkbox') },
                                    React.createElement(Checkbox, { required: true, label: dictionariesForm.policy, onChange: function (_a) {
                                            var e = _a.e;
                                            return handleChange(e);
                                        }, onBlur: handleBlur, name: "privacyAgreement", checked: values.privacyAgreement })),
                                React.createElement("div", { className: cnContentBuilderTemplate('Button') },
                                    React.createElement(Button, { iconRight: IconArrowRight, disabled: isSubmitting || !!Object.keys(errors).length || !dirty, label: dictionariesForm.button, type: "submit" }),
                                    recaptchaKey && (React.createElement(ReCAPTCHA, { ref: reCaptchaRef, sitekey: recaptchaKey, size: "invisible" })))))));
                }),
                React.createElement(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.createElement("div", { className: cnContentBuilderTemplate('ModalSuccess') },
                        React.createElement(Typography.Title, { size: "lg", className: cnContentBuilderTemplate('ModalSuccess-Title') }, dictionariesForm.success.title),
                        React.createElement(Typography.Text, { className: cnContentBuilderTemplate('ModalSuccess-SubTitle') }, dictionariesForm.success.text)))),
            member && (React.createElement(GridItem, { breakpoints: { desktop: { col: 5 }, tablet: { col: 4 } } },
                React.createElement(Mq, { query: "--mobile" },
                    React.createElement(MemberCard, __assign({}, member, { view: "ghost", routePath: aliases.TEAM_MEMBER, socials: true }))))))));
});
export default ContentBuilderTemplate;
