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';
yup.addMethod(yup.string, 'integer', function () {
    return this.matches(/^\d+$/, 'The field should have digits only');
});
export 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()
    });
};
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, 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 = __read(useState(false), 2), successForm = _b[0], setSuccessForm = _b[1];
    var schemaAll = schemaLetsTalkAll(phoneError, emailError, requiredError);
    var reCaptchaRef = useRef(null);
    var initialValues = {
        name: '',
        phone: '',
        company: '',
        email: '',
        additionalInfo: '',
        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: "md", 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 }, 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.createElement(FormBody, { className: cnContentBuilderTemplate('Form', {}) },
                        React.createElement("div", { className: cnContentBuilderTemplate('Inner') },
                            React.createElement("div", { className: cnContentBuilderTemplate('Body') },
                                React.createElement(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.createElement(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.createElement(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.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: "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.createElement("div", { className: cnContentBuilderTemplate('Bottom') },
                                React.createElement("div", { className: cnContentBuilderTemplate('Checkbox') },
                                    React.createElement(Checkbox, { required: true, label: dictionariesForm.policy, name: "privacyAgreement", onChange: function (_a) {
                                            var e = _a.e;
                                            return handleChange(e);
                                        }, onBlur: handleBlur, 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, 
                                        // onChange={value => {
                                        //   console.log('$$$$', isSubmitting, value);
                                        //   setSubmitting(false);
                                        // }}
                                        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') },
                        dictionariesForm.success && (React.createElement(Typography.Title, { size: "lg", className: cnContentBuilderTemplate('ModalSuccess-Title') }, dictionariesForm.success.title)),
                        dictionariesForm.success && (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;
