import { __assign, __awaiter, __generator } from "tslib";
// @ts-nocheck
import './FileCardForm.css';
import React, { useRef } from 'react';
import ReCAPTCHA from 'react-google-recaptcha';
import * as yup from 'yup';
import 'yup-phone';
import { IconArrowRight } from '../../icons/IconArrowRight/IconArrowRight';
import { cn } from '../../utils/bem';
import { Button } from '../Button/Button';
import { Checkbox } from '../Checkbox/Checkbox';
import { Form, FormBody } from '../Form/Form';
import { Grid, GridItem } from '../Grid/Grid';
import { TextField } from '../TextField/TextField';
yup.addMethod(yup.string, 'integer', function () {
    return this.matches(/^\d+$/, 'The field should have digits only');
});
export 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()
    }),
]; };
var cnFileCardForm = cn('FileCardForm');
export 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 = useRef(null);
    var schema = schemaLetsTalk();
    return (React.createElement(React.Fragment, null,
        React.createElement(Form, { enableReinitialize: true, initialValues: initialValues, validationSchema: schema[type], 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:
                            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(__assign(__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.createElement(FormBody, { className: cnFileCardForm({ type: type }) },
                React.createElement("div", { className: cnFileCardForm('Inner') },
                    React.createElement("div", { className: cnFileCardForm('Body') },
                        React.createElement(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.createElement(GridItem, null,
                                React.createElement(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.createElement(React.Fragment, null,
                                React.createElement(GridItem, null,
                                    React.createElement(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.createElement(GridItem, null,
                                    React.createElement(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.createElement(GridItem, null,
                                React.createElement(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.createElement(GridItem, null,
                                React.createElement(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.createElement(GridItem, null,
                                React.createElement("div", { className: cnFileCardForm('Bottom') },
                                    React.createElement(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.createElement(Button, { iconRight: IconArrowRight, disabled: isSubmitting || !dirty || !!Object.keys(errors).length, label: dictionaries.companySiteFormDownloadFile
                                            .companySiteFormDownloadFileSubmit, type: "submit" }))))),
                    recaptchaKey && (React.createElement(ReCAPTCHA, { ref: reCaptchaRef, sitekey: recaptchaKey, size: "invisible" })))));
        })));
};
