"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 __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
    return new (P || (P = Promise))(function (resolve, reject) {
        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
        step((generator = generator.apply(thisArg, _arguments || [])).next());
    });
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.SignInForm = void 0;
const contexts_1 = require("../../../contexts/index.js");
const hooks_1 = require("../../../hooks/index.js");
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 BEButton_1 = __importDefault(require("../../generic/BEButton"));
const Headline_1 = __importDefault(require("../../generic/Headline"));
const Icon_1 = require("../../generic/Icon/Icon");
const PasswordBox_1 = require("../../generic/PasswordBox/PasswordBox");
const Text_1 = __importStar(require("../../generic/Text"));
const TextBox_1 = __importDefault(require("../../generic/TextBox"));
const Color_1 = require("../../../util/Color");
const SignInForm = (props) => {
    const { t } = (0, react_i18next_1.useTranslation)();
    const { error, login, reset, setPendingCredentials } = (0, react_1.useContext)(contexts_1.AuthenticationContext);
    const { loading } = (0, contexts_1.useMemberContext)();
    const { hotel } = (0, hooks_1.useCurrentHotel)();
    const { register, formState, handleSubmit, clearErrors } = (0, react_hook_form_1.useForm)({
        mode: 'onSubmit',
    });
    const errors = formState.errors;
    const getValidationClass = (name) => {
        if (errors) {
            if (errors[name]) {
                return 'error';
            }
            else {
                return 'success';
            }
        }
    };
    const onSubmit = (values) => __awaiter(void 0, void 0, void 0, function* () {
        var _a, _b, _c;
        if (loading)
            return;
        clearErrors();
        reset();
        try {
            const loginState = yield login(values.email, values.password, { hotel });
            if (loginState === contexts_1.CognitoLoginState.RequiresConfirmation) {
                setPendingCredentials({ email: values.email, password: values.password });
                (_a = props.onNotVerified) === null || _a === void 0 ? void 0 : _a.call(props);
            }
            else {
                if (loginState === contexts_1.CognitoLoginState.Success) {
                    (_b = props.onSignedIn) === null || _b === void 0 ? void 0 : _b.call(props);
                }
                (_c = props.onDone) === null || _c === void 0 ? void 0 : _c.call(props);
            }
        }
        catch (ex) {
            console.error(ex);
        }
    });
    const onInvalid = () => {
        reset();
    };
    const onForgotPasswordClicked = () => {
        var _a;
        (_a = props.onForgotPassword) === null || _a === void 0 ? void 0 : _a.call(props);
    };
    return (react_1.default.createElement("div", null,
        react_1.default.createElement("div", { className: "u-marg-bottom--heavy" },
            react_1.default.createElement(Headline_1.default, { color: Color_1.Color.Navy, bold: true, className: "u-marg-bottom--light" }, t(Translation_1.Translation.Navigation.SignIn.SignIn)),
            react_1.default.createElement(Text_1.default, { color: Color_1.Color.Navy, bold: false, type: Text_1.TextType.Body }, t(Translation_1.Translation.Navigation.SignIn.GetLowerPrices))),
        react_1.default.createElement(AutoAutoHeight_1.default, { open: !!error },
            react_1.default.createElement("div", { className: "u-flex" },
                react_1.default.createElement(Alert_1.default, { type: Alert_1.AlertType.Danger, icon: Icon_1.IconType.Error },
                    react_1.default.createElement(Text_1.default, { type: Text_1.TextType.Small }, error === null || error === void 0 ? void 0 : error.message)))),
        react_1.default.createElement(AutoAutoHeight_1.default, { open: !!formState.errors },
            react_1.default.createElement("div", { className: "u-flex flex-column" }, Object.keys(formState.errors).map((errorName, index) => {
                var _a;
                return (react_1.default.createElement(Alert_1.default, { type: Alert_1.AlertType.Danger, icon: Icon_1.IconType.Error, key: index },
                    react_1.default.createElement(Text_1.default, { type: Text_1.TextType.Small }, (_a = formState.errors[errorName]) === null || _a === void 0 ? void 0 : _a.message)));
            }))),
        react_1.default.createElement("form", { onSubmit: handleSubmit(onSubmit, onInvalid), className: "u-marg-bottom" },
            react_1.default.createElement("div", { className: "u-marg-bottom" },
                react_1.default.createElement("div", { className: "u-marg-bottom--light" },
                    react_1.default.createElement(Text_1.default, { type: Text_1.TextType.Label, color: Color_1.Color.Navy, bold: true }, t(Translation_1.Translation.Navigation.SignIn.EmailAddress))),
                react_1.default.createElement(TextBox_1.default, Object.assign({ placeholder: "example@mail.com", required: true, validationStatus: getValidationClass('email'), inputProps: { disabled: loading } }, register('email', {
                    required: {
                        message: `${t(Translation_1.Translation.Navigation.SignIn.EmailAddress)} is required`,
                        value: true,
                    },
                    pattern: {
                        value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i,
                        message: t(Translation_1.Translation.FindReservation.InvalidEmailAddress),
                    },
                })))),
            react_1.default.createElement("div", { className: "u-marg-bottom" },
                react_1.default.createElement("div", { className: "u-marg-bottom--light" },
                    react_1.default.createElement(Text_1.default, { type: Text_1.TextType.Label, color: Color_1.Color.Navy, bold: true }, t(Translation_1.Translation.Navigation.SignIn.Password))),
                react_1.default.createElement(PasswordBox_1.PasswordBox, Object.assign({ inputProps: { disabled: loading }, placeholder: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022", required: true, validationStatus: getValidationClass('password') }, register('password', {
                    required: { message: 'Password is required', value: true },
                    minLength: { message: 'Password must be at least 8 characters long', value: 8 },
                }))),
                react_1.default.createElement("div", { className: "u-marg-top--light" },
                    react_1.default.createElement(BEButton_1.default, { isText: true, size: "tiny", textColor: Color_1.Color.Navy, onClick: onForgotPasswordClicked }, t(Translation_1.Translation.Navigation.SignIn.ForgotPassword)))),
            react_1.default.createElement(BEButton_1.default, { wide: true, icon: Icon_1.IconType.ArrowRight, iconPosition: "right", filled: true, primary: true, name: "SignInButton", htmlType: "submit", isLoading: loading }, t(Translation_1.Translation.Navigation.SignIn.SignIn))),
        false && ( // TODO: We do not currently support social singin
        react_1.default.createElement(react_1.default.Fragment, null,
            react_1.default.createElement("div", { className: "u-align-center" }, t(Translation_1.Translation.Navigation.SignIn.Or)),
            react_1.default.createElement("div", { className: "u-flex u-flex-column u-marg-top u-flex-justify-center u-marg-bottom--heavy" },
                react_1.default.createElement(BEButton_1.default, { isText: true, className: "u-marg-right" },
                    react_1.default.createElement("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
                        react_1.default.createElement("path", { d: "M8.63085 24C5.00185 23.9799 2 16.8743 2 13.2555C2 7.34428 6.62311 6.05016 8.40483 6.05016C9.20777 6.05016 10.0652 6.35261 10.8214 6.62025C11.3502 6.80694 11.8971 6.99967 12.2013 6.99967C12.3834 6.99967 12.8124 6.83572 13.1912 6.69188C13.999 6.3834 15.0043 6 16.1749 6C16.177 6 16.1798 6 16.1819 6C17.0559 6 19.7062 6.184 21.2996 8.47917L21.6728 9.01715L21.1357 9.40593C20.3683 9.96131 18.9682 10.9744 18.9682 12.9812C18.9682 15.358 20.5538 16.2721 21.3156 16.7117C21.6519 16.9057 22 17.1058 22 17.5434C22 17.8292 19.6225 23.9646 16.17 23.9646C15.3252 23.9646 14.728 23.721 14.2013 23.5062C13.6683 23.2887 13.2086 23.1014 12.4489 23.1014C12.0638 23.1014 11.5768 23.276 11.0613 23.4614C10.3568 23.7136 9.55938 24 8.65457 24H8.63085Z", fill: "#1D1D1D" }),
                        react_1.default.createElement("path", { d: "M15.9978 0C16.0763 3.0263 14.0528 5.12581 12.0317 4.99414C11.6987 2.57904 14.0526 0 15.9978 0Z", fill: "#1D1D1D" }))),
                react_1.default.createElement(BEButton_1.default, { isText: true, className: "u-marg-right" },
                    react_1.default.createElement("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
                        react_1.default.createElement("path", { d: "M8.59895 4.63149C8.59895 4.48188 8.61961 4.15878 8.66093 3.66426C8.70535 3.16869 8.89128 2.65027 9.22493 2.10588C9.55548 1.56357 10.0916 1.07632 10.8374 0.645167C11.5801 0.216095 12.6534 0 14.0541 0H18V4.32501H15.1108C14.8247 4.32501 14.5581 4.43306 14.3175 4.64603C14.0789 4.85901 13.9559 5.0616 13.9559 5.24964V7.94044H17.999C17.9566 8.46717 17.9101 8.97935 17.8564 9.47388L17.6963 10.7808C17.6323 11.2224 17.5672 11.6317 17.5031 12.0088H13.927V24H8.59895V12.0078H6V7.94044H8.59895V4.63149Z", fill: "#1877F2" }))),
                react_1.default.createElement(BEButton_1.default, { isText: true },
                    react_1.default.createElement("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
                        react_1.default.createElement("g", { clipPath: "url(#clip0_13480_12531)" },
                            react_1.default.createElement("path", { d: "M5.31891 14.5034L4.4835 17.6221L1.43011 17.6867C0.517594 15.9942 0 14.0578 0 11.9999C0 10.0101 0.483938 8.13355 1.34175 6.48125H1.34241L4.06078 6.97963L5.25159 9.68169C5.00236 10.4083 4.86652 11.1883 4.86652 11.9999C4.86661 12.8808 5.02617 13.7248 5.31891 14.5034Z", fill: "#FBBB00" }),
                            react_1.default.createElement("path", { d: "M23.7902 9.75822C23.928 10.4841 23.9999 11.2338 23.9999 12C23.9999 12.8591 23.9095 13.6971 23.7375 14.5055C23.1533 17.2563 21.6269 19.6582 19.5124 21.358L19.5118 21.3573L16.0878 21.1826L15.6032 18.1576C17.0063 17.3347 18.1028 16.047 18.6804 14.5055H12.2637V9.75822H18.774H23.7902Z", fill: "#518EF8" }),
                            react_1.default.createElement("path", { d: "M19.5114 21.3574L19.5121 21.3581C17.4556 23.011 14.8433 24.0001 11.9996 24.0001C7.42969 24.0001 3.45652 21.4458 1.42969 17.6869L5.31848 14.5036C6.33187 17.2082 8.94089 19.1335 11.9996 19.1335C13.3143 19.1335 14.546 18.7781 15.6029 18.1577L19.5114 21.3574Z", fill: "#28B446" }),
                            react_1.default.createElement("path", { d: "M19.6596 2.76262L15.7721 5.94525C14.6783 5.26153 13.3853 4.86656 12 4.86656C8.87213 4.86656 6.21431 6.88017 5.25169 9.68175L1.34245 6.48131H1.3418C3.33895 2.63077 7.36223 0 12 0C14.9117 0 17.5814 1.03716 19.6596 2.76262Z", fill: "#F14336" })),
                        react_1.default.createElement("defs", null,
                            react_1.default.createElement("clipPath", { id: "clip0_13480_12531" },
                                react_1.default.createElement("rect", { width: "24", height: "24", fill: "white" }))))))))));
};
exports.SignInForm = SignInForm;
//# sourceMappingURL=SignInForm.js.map