"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    var desc = Object.getOwnPropertyDescriptor(m, k);
    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
      desc = { enumerable: true, get: function() { return m[k]; } };
    }
    Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || (function () {
    var ownKeys = function(o) {
        ownKeys = Object.getOwnPropertyNames || function (o) {
            var ar = [];
            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
            return ar;
        };
        return ownKeys(o);
    };
    return function (mod) {
        if (mod && mod.__esModule) return mod;
        var result = {};
        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
        __setModuleDefault(result, mod);
        return result;
    };
})();
var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const contexts_1 = require("../../../contexts/index.js");
const hooks_1 = require("../../../hooks/index.js");
const core_1 = require("@roomstay/core");
const cloneDeep_1 = __importDefault(require("lodash/cloneDeep"));
const react_1 = __importStar(require("react"));
const react_hook_form_1 = require("react-hook-form");
const react_i18next_1 = require("react-i18next");
const Translation_1 = require("translations/Translation");
const AutoAutoHeight_1 = __importDefault(require("../../../animations/AutoAutoHeight"));
const Alert_1 = __importStar(require("../../generic/Alert"));
const Checkbox_1 = __importDefault(require("../../generic/Checkbox/Checkbox"));
const EnhancedPhoneNumberField_1 = __importDefault(require("../../generic/custom/EnhancedPhoneNumberField/EnhancedPhoneNumberField"));
const Headline_1 = __importDefault(require("../../generic/Headline"));
const Icon_1 = __importStar(require("../../generic/Icon/Icon"));
const InputGroup_1 = __importDefault(require("../../generic/InputGroup/InputGroup"));
const Select_1 = require("../../generic/Select");
const Text_1 = __importStar(require("../../generic/Text"));
const TextBox_1 = __importDefault(require("../../generic/TextBox"));
const StepConfirmationCountrySelector_1 = __importDefault(require("./StepConfirmationCountrySelector"));
const useSearchScopeHook_1 = require("../../../hooks/useSearchScopeHook");
const Hotel_1 = require("../../../models/Client/Hotel/Hotel");
const Confirmation_1 = require("../../../models/Confirmation");
const E164PhoneNumberFieldFeature_1 = __importDefault(require("../../../providers/feature/E164PhoneNumberFieldFeature"));
const GuestTitleFieldFeature_1 = __importDefault(require("../../../providers/feature/GuestTitleFieldFeature"));
const Color_1 = require("../../../util/Color");
const DataLayer_1 = __importStar(require("../../../util/DataLayer"));
const StringHelper_1 = __importDefault(require("../../../util/StringHelper"));
const Validation_1 = require("../../../util/Validation");
const RoomContactDetails = () => {
    const { register, formState, control, watch, getValues, setValue } = (0, react_hook_form_1.useFormContext)();
    const basketContext = (0, react_1.useContext)(contexts_1.BasketContext);
    const basketRows = basketContext.getAllValidRows();
    const { hotel } = (0, hooks_1.useCurrentHotel)();
    const isAddressRequired = (hotel === null || hotel === void 0 ? void 0 : hotel.addressRequirement) === Hotel_1.EHotelAddressRequirement.FullAddressRequired;
    const isCountryRequired = (hotel === null || hotel === void 0 ? void 0 : hotel.addressRequirement) === Hotel_1.EHotelAddressRequirement.FullAddressRequired || (hotel === null || hotel === void 0 ? void 0 : hotel.addressRequirement) === Hotel_1.EHotelAddressRequirement.AddressOptionalCountryRequired;
    const addressPlaceholder = (placeholder, required) => placeholder + (required ? ' *' : '');
    const { update, fields } = (0, react_hook_form_1.useFieldArray)({
        control,
        name: 'userProfiles',
        rules: {
            required: false,
        },
    });
    const [copyCheckBox, paymentMethod] = watch(['copyCheckBox', 'paymentMethod']);
    const errors = formState.errors;
    const { t } = (0, react_i18next_1.useTranslation)();
    const { roomstayMember: member } = (0, react_1.useContext)(contexts_1.RoomstayMemberContext);
    const { showChildren } = (0, useSearchScopeHook_1.useSearchScopeHook)();
    (0, react_1.useEffect)(() => {
        var _a, _b;
        (_b = (_a = errors.userProfiles) === null || _a === void 0 ? void 0 : _a.forEach) === null || _b === void 0 ? void 0 : _b.call(_a, (_, index) => {
            var _a;
            if ((_a = errors.userProfiles) === null || _a === void 0 ? void 0 : _a[index]) {
                opens[index] = true;
            }
        });
        setOpens(opens.slice(0));
    }, [errors.userProfiles, copyCheckBox]);
    (0, react_1.useEffect)(() => {
        const getDefaultValue = (index, potentialDefaultValue = '') => {
            return index === 0 ? potentialDefaultValue : '';
        };
        const userProfiles = basketRows.map((basketRow, index) => {
            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
            const defaults = basketRow.checkoutDefaults;
            const addr = defaults === null || defaults === void 0 ? void 0 : defaults.address;
            return {
                [Confirmation_1.EUserProfileFormKey.Title]: '', // TODO: Add this to @roomstay/core IRoomstayMember?
                [Confirmation_1.EUserProfileFormKey.Forename]: getDefaultValue(index, (_a = defaults === null || defaults === void 0 ? void 0 : defaults.firstName) !== null && _a !== void 0 ? _a : member === null || member === void 0 ? void 0 : member.forename),
                [Confirmation_1.EUserProfileFormKey.Surname]: getDefaultValue(index, (_b = defaults === null || defaults === void 0 ? void 0 : defaults.lastName) !== null && _b !== void 0 ? _b : member === null || member === void 0 ? void 0 : member.surname),
                [Confirmation_1.EUserProfileFormKey.Email]: getDefaultValue(index, (_c = defaults === null || defaults === void 0 ? void 0 : defaults.email) !== null && _c !== void 0 ? _c : member === null || member === void 0 ? void 0 : member.email),
                [Confirmation_1.EUserProfileFormKey.Phone]: getDefaultValue(index, (_d = defaults === null || defaults === void 0 ? void 0 : defaults.phone) !== null && _d !== void 0 ? _d : member === null || member === void 0 ? void 0 : member.phoneNumber),
                [Confirmation_1.EUserProfileFormKey.Address]: getDefaultValue(index, (_e = addr === null || addr === void 0 ? void 0 : addr.line1) !== null && _e !== void 0 ? _e : (_f = member === null || member === void 0 ? void 0 : member.address) === null || _f === void 0 ? void 0 : _f.address),
                [Confirmation_1.EUserProfileFormKey.City]: getDefaultValue(index, (_g = addr === null || addr === void 0 ? void 0 : addr.city) !== null && _g !== void 0 ? _g : (_h = member === null || member === void 0 ? void 0 : member.address) === null || _h === void 0 ? void 0 : _h.city),
                [Confirmation_1.EUserProfileFormKey.PostCode]: getDefaultValue(index, (_j = addr === null || addr === void 0 ? void 0 : addr.postalCode) !== null && _j !== void 0 ? _j : (_k = member === null || member === void 0 ? void 0 : member.address) === null || _k === void 0 ? void 0 : _k.zip),
                [Confirmation_1.EUserProfileFormKey.State]: getDefaultValue(index, (_l = addr === null || addr === void 0 ? void 0 : addr.state) !== null && _l !== void 0 ? _l : (_m = member === null || member === void 0 ? void 0 : member.address) === null || _m === void 0 ? void 0 : _m.state),
                [Confirmation_1.EUserProfileFormKey.Country]: getDefaultValue(index, (_o = addr === null || addr === void 0 ? void 0 : addr.country) !== null && _o !== void 0 ? _o : (_p = member === null || member === void 0 ? void 0 : member.address) === null || _p === void 0 ? void 0 : _p.country),
                [Confirmation_1.EUserProfileFormKey.CountryId]: getDefaultValue(index, (_q = addr === null || addr === void 0 ? void 0 : addr.countryId) === null || _q === void 0 ? void 0 : _q.toString()),
                [Confirmation_1.EUserProfileFormKey.CountryCode]: getDefaultValue(index, addr === null || addr === void 0 ? void 0 : addr.countryCode),
                [Confirmation_1.EUserRequiredInputFormKey.AuxInputs]: basketRow.auxiliaryFilter,
            };
        });
        setValue('userProfiles', userProfiles);
        setValue('copyCheckBox', !!((basketRows === null || basketRows === void 0 ? void 0 : basketRows.length) && basketRows.length > 1));
    }, [member, basketRows === null || basketRows === void 0 ? void 0 : basketRows.length]);
    const padInputNameByRoomNumber = (name, index) => `userProfiles.${index}.${name}`;
    const [opens, setOpens] = (0, react_1.useState)(basketRows.map((basketRow, index) => index === 0));
    const copyUserProfileFormFields = (currentIndex) => {
        const values = (0, cloneDeep_1.default)(getValues(`userProfiles.0`));
        const currentValues = (0, cloneDeep_1.default)(getValues(`userProfiles.${currentIndex}`));
        // Exclude AuxInputs
        values[Confirmation_1.EUserRequiredInputFormKey.AuxInputs] = currentValues.AuxInputs;
        // Exclude Child Ages
        values.CaptureChildAge = currentValues.CaptureChildAge;
        return values;
    };
    const onInputChange = (fieldName, interactionName) => (event) => {
        DataLayer_1.default.instance.sendInteraction(interactionName, DataLayer_1.InteractionType.FORM_FIELD, DataLayer_1.InteractionStep.GUEST_DETAILS);
    };
    (0, react_1.useEffect)(() => {
        if (copyCheckBox)
            fields.forEach((basketRow, index) => {
                if (index === 0)
                    return;
                const values = copyUserProfileFormFields(index);
                update(index, values);
            });
    }, [copyCheckBox]);
    (0, react_1.useEffect)(() => {
        const { unsubscribe } = watch((allFields, { name, type }) => {
            if (type === 'change' && (name === null || name === void 0 ? void 0 : name.includes('userProfiles')) && name.split('.')[1] === '0' && allFields.copyCheckBox) {
                fields.map((field, index) => {
                    if (index === 0)
                        return;
                    const values = copyUserProfileFormFields(index);
                    update(index, values);
                });
            }
        });
        return () => {
            unsubscribe();
        };
    }, [fields]);
    const setOpenByIndex = (index, value) => {
        opens.splice(index, 1, value);
        setOpens(opens.slice(0));
    };
    const renderError = (userProfileIndex) => {
        var _a;
        const userProfile = (_a = errors.userProfiles) === null || _a === void 0 ? void 0 : _a[userProfileIndex];
        if (userProfile && formState.submitCount >= 1 && (userProfileIndex === 0 || !copyCheckBox))
            return Object.values(userProfile).map((error, errorIndex) => {
                return (react_1.default.createElement(AutoAutoHeight_1.default, { key: errorIndex, open: true },
                    react_1.default.createElement("div", { className: "u-flex" },
                        react_1.default.createElement(Alert_1.default, { icon: Icon_1.IconType.Error, type: Alert_1.AlertType.Danger, noMargin: errorIndex === Object.keys(userProfile).length - 1 },
                            react_1.default.createElement(Text_1.default, { type: Text_1.TextType.Small }, error === null || error === void 0 ? void 0 : error.message)))));
            });
        return null;
    };
    return (react_1.default.createElement(react_1.default.Fragment, null, fields.map((field, index) => {
        var _a, _b, _c, _d, _e;
        const padInputName = (name) => padInputNameByRoomNumber(name, index);
        const getValidationClass = (name) => {
            var _a, _b, _c;
            if (!errors.userProfiles || (copyCheckBox && index >= 1))
                return;
            if ((_a = errors.userProfiles[index]) === null || _a === void 0 ? void 0 : _a[name]) {
                return 'error';
                // Hack to get Aux Inputs to validate as well.
            }
            else if ((_c = (_b = errors.userProfiles[index]) === null || _b === void 0 ? void 0 : _b.AuxInputs) === null || _c === void 0 ? void 0 : _c[name.replace('AuxInputs.', '')]) {
                return 'error';
            }
            else {
                return 'success';
            }
        };
        const openExpandable = () => {
            if (index !== 0) {
                setOpenByIndex(index, !opens[index]);
            }
        };
        const basketRow = basketRows[index];
        const currentRoom = basketRow.getRoom();
        const filterValue = basketRow.getAuxiliaryFilter();
        const isDisabled = (copyCheckBox && index >= 1) || paymentMethod === core_1.EBookingPaymentMethod.Planpay;
        const includeStateField = (hotel === null || hotel === void 0 ? void 0 : hotel.stateFieldConfiguration) === core_1.EHotelStateFieldConfiguration.Optional || (hotel === null || hotel === void 0 ? void 0 : hotel.stateFieldConfiguration) === core_1.EHotelStateFieldConfiguration.Required;
        const stateFieldRequired = (hotel === null || hotel === void 0 ? void 0 : hotel.stateFieldConfiguration) === core_1.EHotelStateFieldConfiguration.Required;
        // Build list of auxiliary inputs the user is required to complete
        const roomGroup = (_a = hotel === null || hotel === void 0 ? void 0 : hotel.roomGroups) === null || _a === void 0 ? void 0 : _a.find(({ id }) => id === currentRoom.roomGroupId);
        const requiredInputs = [];
        for (const inputKey of Object.keys((_b = roomGroup === null || roomGroup === void 0 ? void 0 : roomGroup.filters) !== null && _b !== void 0 ? _b : {})) {
            const input = roomGroup === null || roomGroup === void 0 ? void 0 : roomGroup.filters[inputKey];
            const values = (_d = (_c = currentRoom === null || currentRoom === void 0 ? void 0 : currentRoom.auxiliaryValues) === null || _c === void 0 ? void 0 : _c[inputKey]) === null || _d === void 0 ? void 0 : _d.map((value) => value.toString());
            if ((input === null || input === void 0 ? void 0 : input.requireInput) && values) {
                // Reduce available options to those assigned to the room
                const options = input.options.filter((option) => {
                    if (values.includes(option.value.toString())) {
                        return option;
                    }
                });
                const requiredInputId = `${(0, core_1.nameof)('AuxInputs')}.${inputKey}`;
                if (options.length === 1) {
                    setValue(padInputName(requiredInputId), options[0].value);
                }
                else if (filterValue === null || filterValue === void 0 ? void 0 : filterValue[inputKey]) {
                    setValue(padInputName(requiredInputId), filterValue[inputKey]);
                }
                // Convert options to format acceptable by the input
                requiredInputs.push({
                    id: requiredInputId,
                    name: input.name,
                    label: input.name,
                    options: options.map((option) => {
                        return { label: option.label, value: option.value };
                    }),
                });
            }
        }
        // The Country input field will be included in different places, depending on whether the State field is enabled or not.
        const countryInputField = (react_1.default.createElement(react_hook_form_1.Controller, { control: control, name: padInputName(Confirmation_1.EUserProfileFormKey.Country), rules: {
                required: {
                    value: isCountryRequired,
                    message: t(Translation_1.Translation.Step.Confirmation.Inputs.Required, { field: t(Translation_1.Translation.Step.Confirmation.Inputs.Country) }),
                },
            }, render: ({ field }) => {
                const { ref, onChange } = field, rest = __rest(field, ["ref", "onChange"]);
                return (react_1.default.createElement(StepConfirmationCountrySelector_1.default, Object.assign({ ref: ref, disableOpenOnFocus: true, disabled: isDisabled, validationStatus: getValidationClass(Confirmation_1.EUserProfileFormKey.Country), onChange: (e) => {
                        onChange(e);
                        onInputChange(padInputName(Confirmation_1.EUserProfileFormKey.Country), 'Country - Address')(e);
                    }, onChangeId: (id) => {
                        setValue(padInputName(Confirmation_1.EUserProfileFormKey.CountryId), id); // Hack to make CountryID be set...
                    }, onChangeCode: (code) => {
                        setValue(padInputName(Confirmation_1.EUserProfileFormKey.CountryCode), code); // Hack to make CountryID be set...
                    }, required: isCountryRequired }, rest)));
            } }));
        return (react_1.default.createElement("div", { key: field.id },
            react_1.default.createElement("div", { className: index === 0 ? '' : 'u-marg-bottom--heavy' },
                react_1.default.createElement("div", { className: "u-marg-bottom", onClick: openExpandable },
                    react_1.default.createElement("div", { className: "u-flex u-marg-bottom align-items-center" },
                        react_1.default.createElement(Headline_1.default, { bold: true },
                            t(Translation_1.Translation.Misc.Room),
                            " ",
                            index + 1),
                        index !== 0 && react_1.default.createElement(Icon_1.default, { icon: opens[index] ? Icon_1.IconType.ArrowDown2 : Icon_1.IconType.ArrowUp2, color: Color_1.Color.Grey })),
                    basketRow && (react_1.default.createElement("div", { className: "u-marg-bottom" },
                        react_1.default.createElement(Text_1.default, null,
                            react_1.default.createElement("strong", { className: "u-block@l-" }, basketRow.getRoom().name),
                            " for",
                            ' ',
                            StringHelper_1.default.pluralWithDictAndCount(basketRow.getAdults(), Translation_1.Translation.Step.Date.Adult, t),
                            showChildren ? (react_1.default.createElement(react_1.default.Fragment, null,
                                ",\u00A0",
                                StringHelper_1.default.pluralWithDictAndCount(basketRow.getChildren(), Translation_1.Translation.Step.Date.Child, t))) : null,
                            ((_e = hotel === null || hotel === void 0 ? void 0 : hotel.childConfiguration) === null || _e === void 0 ? void 0 : _e.supportInfants) ? (react_1.default.createElement(react_1.default.Fragment, null,
                                ",\u00A0",
                                StringHelper_1.default.pluralWithDictAndCount(basketRow.getInfants(), Translation_1.Translation.Step.Date.Infant, t))) : null),
                        react_1.default.createElement("div", { className: "step-one-status--dates u-flex justify-content-start" },
                            react_1.default.createElement(Text_1.default, { type: Text_1.TextType.Small, color: Color_1.Color.Accent },
                                react_1.default.createElement("strong", null, basketRow.getStartDate().format('ddd, MMM D'))),
                            react_1.default.createElement(Icon_1.default, { icon: Icon_1.IconType.ArrowRight2, size: "18px" }),
                            react_1.default.createElement(Text_1.default, { type: Text_1.TextType.Small, color: Color_1.Color.Accent },
                                react_1.default.createElement("strong", null, basketRow.getEndDate().format('ddd, MMM D')))))),
                    renderError(index)),
                react_1.default.createElement("div", { className: "room-contact-details--row", style: { maxHeight: opens[index] ? undefined : 0 } },
                    react_1.default.createElement("div", { className: "u-marg-bottom--heavy" },
                        react_1.default.createElement("div", { className: "u-marg-bottom--light" },
                            react_1.default.createElement(Text_1.default, { type: Text_1.TextType.Small },
                                react_1.default.createElement("strong", null, t(Translation_1.Translation.Step.Confirmation.ContactInfo)))),
                        react_1.default.createElement(InputGroup_1.default, { dimensions: GuestTitleFieldFeature_1.default.isActive() ? '1/2/2' : '2/2' },
                            GuestTitleFieldFeature_1.default.isActive() && (react_1.default.createElement(react_hook_form_1.Controller, { control: control, name: padInputName(Confirmation_1.EUserProfileFormKey.Title), rules: { required: true }, render: ({ field }) => {
                                    const { ref } = field, rest = __rest(field, ["ref"]);
                                    return (react_1.default.createElement(Select_1.InputSelect, Object.assign({ keyName: "value", labelName: "label", options: GuestTitleFieldFeature_1.default.getTitleOptions(), placeholder: t(Translation_1.Translation.Step.Confirmation.Inputs.Title) + ' *', required: true, validationStatus: getValidationClass(Confirmation_1.EUserProfileFormKey.Title) }, rest)));
                                } })),
                            react_1.default.createElement(TextBox_1.default, Object.assign({ inputProps: {
                                    disabled: isDisabled,
                                }, placeholder: t(Translation_1.Translation.Step.Confirmation.Inputs.Forename) + ' *', wide: true, required: true, validationStatus: getValidationClass(Confirmation_1.EUserProfileFormKey.Forename) }, register(padInputName(Confirmation_1.EUserProfileFormKey.Forename), {
                                onChange: onInputChange(padInputName(Confirmation_1.EUserProfileFormKey.Forename), 'Forename - Contact Info'),
                                required: {
                                    value: true,
                                    message: t(Translation_1.Translation.Step.Confirmation.Inputs.Required, { field: t(Translation_1.Translation.Step.Confirmation.Inputs.Forename) }),
                                },
                            }))),
                            react_1.default.createElement(TextBox_1.default, Object.assign({ inputProps: {
                                    disabled: isDisabled,
                                }, placeholder: t(Translation_1.Translation.Step.Confirmation.Inputs.Surname) + ' *', wide: true, required: true, validationStatus: getValidationClass(Confirmation_1.EUserProfileFormKey.Surname) }, register(padInputName(Confirmation_1.EUserProfileFormKey.Surname), {
                                onChange: onInputChange(padInputName(Confirmation_1.EUserProfileFormKey.Surname), 'Surname - Contact Info'),
                                required: {
                                    value: true,
                                    message: t(Translation_1.Translation.Step.Confirmation.Inputs.Required, { field: t(Translation_1.Translation.Step.Confirmation.Inputs.Surname) }),
                                },
                            })))),
                        react_1.default.createElement(InputGroup_1.default, { dimensions: "2/2" },
                            react_1.default.createElement(TextBox_1.default, Object.assign({ inputProps: {
                                    disabled: isDisabled,
                                }, placeholder: t(Translation_1.Translation.Step.Confirmation.Inputs.Email) + ' *', wide: true, validationStatus: getValidationClass(Confirmation_1.EUserProfileFormKey.Email), required: true }, register(padInputName(Confirmation_1.EUserProfileFormKey.Email), {
                                onChange: onInputChange(padInputName(Confirmation_1.EUserProfileFormKey.Email), 'Email - Contact Info'),
                                required: {
                                    value: true,
                                    message: t(Translation_1.Translation.Step.Confirmation.Inputs.Required, { field: t(Translation_1.Translation.Step.Confirmation.Inputs.Email) }),
                                },
                                pattern: {
                                    value: Validation_1.EMAIL_REGEX,
                                    message: t(Translation_1.Translation.Step.Confirmation.Inputs.InvalidEmail),
                                },
                            }))),
                            E164PhoneNumberFieldFeature_1.default.isActive() ? (react_1.default.createElement(react_hook_form_1.Controller, { control: control, name: padInputName(Confirmation_1.EUserProfileFormKey.Phone), rules: {
                                    required: {
                                        value: true,
                                        message: t(Translation_1.Translation.Step.Confirmation.Inputs.Required, { field: t(Translation_1.Translation.Step.Confirmation.Inputs.Phone) }),
                                    },
                                    minLength: {
                                        value: 5,
                                        message: 'Phone number is required',
                                    },
                                    maxLength: {
                                        value: 17,
                                        message: 'Phone number is too long',
                                    },
                                    pattern: {
                                        value: /^[1-9]( |\d){1,15}$/g,
                                        message: 'Incorrect phone number entered',
                                    },
                                }, render: ({ field }) => {
                                    return (react_1.default.createElement(EnhancedPhoneNumberField_1.default, Object.assign({ disabled: isDisabled, validationStatus: getValidationClass(Confirmation_1.EUserProfileFormKey.Phone) }, field, { onChange: (e) => {
                                            field.onChange(e);
                                            onInputChange(padInputName(Confirmation_1.EUserProfileFormKey.Phone), 'Phone - Contact Info')(e);
                                        } })));
                                } })) : (react_1.default.createElement(TextBox_1.default, Object.assign({ inputProps: {
                                    disabled: isDisabled,
                                }, placeholder: t(Translation_1.Translation.Step.Confirmation.Inputs.Phone) + ' *', wide: true, required: true, validationStatus: getValidationClass(Confirmation_1.EUserProfileFormKey.Phone) }, register(padInputName(Confirmation_1.EUserProfileFormKey.Phone), {
                                onChange: onInputChange(padInputName(Confirmation_1.EUserProfileFormKey.Phone), 'Phone - Contact Info'),
                                required: {
                                    value: true,
                                    message: t(Translation_1.Translation.Step.Confirmation.Inputs.Required, { field: t(Translation_1.Translation.Step.Confirmation.Inputs.Phone) }),
                                },
                            })))))),
                    react_1.default.createElement("div", { className: "" },
                        react_1.default.createElement("div", { className: "u-marg-bottom--light" },
                            react_1.default.createElement(Text_1.default, { type: Text_1.TextType.Small },
                                react_1.default.createElement("strong", null, t(Translation_1.Translation.Step.Confirmation.Address)))),
                        react_1.default.createElement(InputGroup_1.default, { dimensions: "3/1" },
                            react_1.default.createElement(TextBox_1.default, Object.assign({ inputProps: {
                                    disabled: isDisabled,
                                }, placeholder: addressPlaceholder(t(Translation_1.Translation.Step.Confirmation.Inputs.Address), isAddressRequired), wide: true, required: isAddressRequired, validationStatus: getValidationClass(Confirmation_1.EUserProfileFormKey.Address) }, register(padInputName(Confirmation_1.EUserProfileFormKey.Address), {
                                onChange: onInputChange(padInputName(Confirmation_1.EUserProfileFormKey.Address), 'Address - Address'),
                                required: {
                                    value: isAddressRequired,
                                    message: t(Translation_1.Translation.Step.Confirmation.Inputs.Required, { field: t(Translation_1.Translation.Step.Confirmation.Inputs.Address) }),
                                },
                            }))),
                            react_1.default.createElement(TextBox_1.default, Object.assign({ inputProps: {
                                    disabled: isDisabled,
                                }, placeholder: addressPlaceholder(t(Translation_1.Translation.Step.Confirmation.Inputs.City), isAddressRequired), wide: true, required: isAddressRequired, validationStatus: getValidationClass(Confirmation_1.EUserProfileFormKey.City) }, register(padInputName(Confirmation_1.EUserProfileFormKey.City), {
                                onChange: onInputChange(padInputName(Confirmation_1.EUserProfileFormKey.City), 'City - Address'),
                                required: {
                                    value: isAddressRequired,
                                    message: t(Translation_1.Translation.Step.Confirmation.Inputs.Required, { field: t(Translation_1.Translation.Step.Confirmation.Inputs.City) }),
                                },
                            })))),
                        react_1.default.createElement(InputGroup_1.default, { dimensions: "2/2" },
                            react_1.default.createElement(TextBox_1.default, Object.assign({ inputProps: {
                                    disabled: isDisabled,
                                }, placeholder: addressPlaceholder(t(Translation_1.Translation.Step.Confirmation.Inputs.PostCode), isAddressRequired), wide: true, required: isAddressRequired, validationStatus: getValidationClass(Confirmation_1.EUserProfileFormKey.PostCode) }, register(padInputName(Confirmation_1.EUserProfileFormKey.PostCode), {
                                onChange: onInputChange(padInputName(Confirmation_1.EUserProfileFormKey.PostCode), 'PostCode - Address'),
                                required: {
                                    value: isAddressRequired,
                                    message: t(Translation_1.Translation.Step.Confirmation.Inputs.Required, { field: t(Translation_1.Translation.Step.Confirmation.Inputs.PostCode) }),
                                },
                            }))),
                            includeStateField ? (
                            // Render the State field here if it's required, otherwise render the Country field
                            react_1.default.createElement(TextBox_1.default, Object.assign({ inputProps: {
                                    disabled: isDisabled,
                                }, placeholder: t(Translation_1.Translation.Step.Confirmation.Inputs.State) + (stateFieldRequired ? ' *' : ''), wide: true, required: stateFieldRequired, validationStatus: getValidationClass(Confirmation_1.EUserProfileFormKey.State) }, register(padInputName(Confirmation_1.EUserProfileFormKey.State), {
                                onChange: onInputChange(padInputName(Confirmation_1.EUserProfileFormKey.State), 'State - Address'),
                                required: {
                                    value: stateFieldRequired,
                                    message: t(Translation_1.Translation.Step.Confirmation.Inputs.Required, { field: t(Translation_1.Translation.Step.Confirmation.Inputs.State) }),
                                },
                            })))) : (countryInputField)),
                        includeStateField && react_1.default.createElement(InputGroup_1.default, { dimensions: "1" }, countryInputField))),
                requiredInputs.length > 0 && (react_1.default.createElement("div", { className: "u-marg-top" },
                    react_1.default.createElement("div", { className: "u-marg-top" },
                        react_1.default.createElement(InputGroup_1.default, { dimensions: "2/2" }, requiredInputs.map((input) => {
                            const options = input.options;
                            return (react_1.default.createElement(react_hook_form_1.Controller, { key: input.id, control: control, name: padInputName(input.id), rules: { required: true }, render: ({ field }) => {
                                    const { ref } = field, rest = __rest(field, ["ref"]);
                                    return (react_1.default.createElement(react_1.default.Fragment, null,
                                        react_1.default.createElement("div", { className: "u-marg-bottom--light" },
                                            react_1.default.createElement(Text_1.default, { type: Text_1.TextType.Small },
                                                react_1.default.createElement("strong", null, input.name))),
                                        react_1.default.createElement(Select_1.InputSelect, Object.assign({ key: input.id, keyName: (0, core_1.nameof)('value'), labelName: (0, core_1.nameof)('label'), options: options, placeholder: "Please Select *", validationStatus: getValidationClass(input.id) }, rest))));
                                } }));
                        }))))),
                react_1.default.createElement(CaptureChildAges, { hotel: hotel, numberOfChildrens: Number(basketRow.getChildren()), control: control, roomIndex: index })),
            fields.length > 1 && index === 0 ? (react_1.default.createElement("div", { className: "u-marg-bottom--heavy" },
                react_1.default.createElement(Checkbox_1.default, Object.assign({ label: t(Translation_1.Translation.Step.Confirmation.ApplySameInfoToOtherRooms) }, register('copyCheckBox'))))) : null));
    })));
};
function chunkArray(array, chunkSize) {
    const result = [];
    for (let i = 0; i < array.length; i += chunkSize) {
        result.push(array.slice(i, i + chunkSize));
    }
    return result;
}
const CaptureChildAges = ({ hotel, numberOfChildrens, control, roomIndex, }) => {
    var _a, _b, _c, _d;
    if (!(hotel === null || hotel === void 0 ? void 0 : hotel.captureChildAge) || numberOfChildrens === 0) {
        return react_1.default.createElement(react_1.default.Fragment, null);
    }
    const { formState: { errors }, } = (0, react_hook_form_1.useFormContext)();
    const ageOptions = [];
    const min = ((_b = (_a = hotel === null || hotel === void 0 ? void 0 : hotel.childConfiguration) === null || _a === void 0 ? void 0 : _a.childRange) === null || _b === void 0 ? void 0 : _b.min) || 0;
    const max = ((_d = (_c = hotel === null || hotel === void 0 ? void 0 : hotel.childConfiguration) === null || _c === void 0 ? void 0 : _c.childRange) === null || _d === void 0 ? void 0 : _d.max) || 0;
    for (let index = min; index <= max; index++) {
        ageOptions.push({ label: `${index}`, value: `${index}` });
    }
    const rootKey = `userProfiles[${roomIndex}].${(0, core_1.nameof)('CaptureChildAge')}`;
    const requiredInputs = Array.from({ length: numberOfChildrens }, (_, childIndex) => childIndex).map((childIndex) => ({
        name: `${rootKey}[${childIndex}]`,
        id: `${rootKey}[${childIndex}].id`,
        label: `Child ${childIndex + 1} Age`,
        childIndex: childIndex,
    }));
    const getValidationClass = (childIndex) => {
        var _a, _b, _c;
        if (!errors.userProfiles)
            return;
        if ((_c = (_b = (_a = errors.userProfiles) === null || _a === void 0 ? void 0 : _a[roomIndex]) === null || _b === void 0 ? void 0 : _b.CaptureChildAge) === null || _c === void 0 ? void 0 : _c[childIndex]) {
            return 'error';
        }
        else {
            return 'success';
        }
    };
    const chunkInputs = chunkArray(requiredInputs, 3);
    return (react_1.default.createElement("div", { className: "u-marg-top" }, chunkInputs.map((chunkInput, chunkIndex) => {
        return (react_1.default.createElement(InputGroup_1.default, { dimensions: "1/1/1", key: `InputGroup-${chunkIndex}` }, chunkInput.map(({ id, name, label, childIndex }) => {
            return (react_1.default.createElement(react_hook_form_1.Controller, { key: id, control: control, name: name, rules: { required: true }, render: ({ field }) => {
                    const { ref } = field, rest = __rest(field, ["ref"]);
                    return (react_1.default.createElement(react_1.default.Fragment, null,
                        react_1.default.createElement("div", { className: "u-marg-bottom--light" },
                            react_1.default.createElement(Text_1.default, { type: Text_1.TextType.Small },
                                react_1.default.createElement("strong", null, label))),
                        react_1.default.createElement(Select_1.InputSelect, Object.assign({ keyName: "value", labelName: "label", options: ageOptions, placeholder: "Please Select *" }, rest, { validationStatus: getValidationClass(childIndex) }))));
                } }));
        })));
    })));
};
exports.default = RoomContactDetails;
//# sourceMappingURL=RoomContactDetails.js.map