const tld = document.domain.split('.').pop();
const SetSail = {
    token_key: 'x-set-sail',
    user: 'x-set-sail-user',
    filter_date_from: 'x-set-sail-date-from',
    filter_date_to: 'x-set-sail-date-to',
    message_haute_saison: `En haute saison, nous ne pouvons accepter les réservations qu’en semaines complètes du samedi matin au vendredi après-midi. Nous vous proposons en option de passer la première nuit à bord à quai la veille de votre départ. Nous vous invitons à sélectionner une date de départ le samedi et un retour un vendredi.`,
    clientManagerUrl : `https://clients.set-sail.${tld ?? 'fr'}`
};

/**
 * juillet - aout : obligation minimum une semaine (départ samedi - retour vendredi)
 * @param depart
 * @param retour
 * @returns {boolean}
 */
function validDatesForJulyAndAugust(depart, retour) {
    const startDate = new Date(depart);
    const endDate = new Date(retour);
    const diffTemps = endDate.getTime() - startDate.getTime();
    const diffJours = diffTemps / (1000 * 3600 * 24);
    console.log({
        'diffJours': diffJours,
        'samedi': startDate.getDay(),
        'vendredi': endDate.getDay()
    })
    return diffJours >= 6 && startDate.getDay() === 6 && endDate.getDay() === 5;
}

jQuery(function ($) {
    $(document).on("change", "[data-option-price]", function () {
        console.log($(this));
        console.log(this);
        let $el = $(this),
            option_id = $el.attr('data-option-id'),
            $checkbox = jQuery('[data-option-id=' + option_id + ']');

        if ($el.is(':checked')) {
            $checkbox.attr('checked', 'checked');
        } else {
            $checkbox.removeAttr('checked');
        }
        getTotalPrice(true);
    });

    $(document).on(
        "click",
        ".optionItem label.readonly, .optionItem label.readonly input",
        function (e) {
            e.preventDefault();
        }
    );

    /**
     * Login / Register before checkout logic
     * @type {jQuery|HTMLElement|*}
     */
    const modalLoginSetSail = $('#modal-login'),
        modalRegisterSetSail = $('#modal-registration'),
        modalCheckoutSetSail = $('#modal-checkout'),
        loginSpinnerLoading = $('#login-form-sail-loading'),
        registerSetSailForm = $('#register-form-setsail'),
        loginSetSailForm = $('#login-form-sail');

    const goToCheckout = () => {
        UIkit.modal(modalLoginSetSail).hide();
        UIkit.modal(modalCheckoutSetSail).show();
        // TODO : fill the known form in the stripe checkout form
    }

    const showLoginForm = () => {
        loginSpinnerLoading.hide();
        loginSetSailForm.show();
    }

    const saveUserInfoAndToken = (data) => {
        localStorage.setItem(SetSail.token_key, data.access_token);
        localStorage.setItem(SetSail.user, JSON.stringify(data.user));
    }

    const prefillAllKnownField = () => {
        if (!localStorage.getItem(SetSail.user)) return;
        const currentConnectedUser = JSON.parse(localStorage.getItem(SetSail.user));
        // Formulaire demande devis
        $('#wpforms-18343-field_1').val(currentConnectedUser.name); // Prenom
        // $('#wpforms-18343-field_5').val(currentConnectedUser.name); // Nom de famille
        $('#wpforms-18343-field_2').val(currentConnectedUser.email); // Email
        // $('#wpforms-18343-field_4').val(currentConnectedUser.phone); // Phone

        // Stripe
        console.log("$('#Field-nameInput')", $('#Field-nameInput'))
        $('#Field-nameInput').val(currentConnectedUser.name);
    }

    modalCheckoutSetSail.on('shown', async function () {
        const stripe = Stripe(publishableKey, {
            apiVersion: '2020-08-27',
        });

        const currentConnectedUser = JSON.parse(localStorage.getItem(SetSail.user));
        jQuery('[name=booking_user]').val(currentConnectedUser.id);

        $.ajax({
            url: '/wp-admin/admin-ajax.php?action=boat_checkout',
            method: 'POST',
            data: jQuery('#form-with-options').serialize(),
            dataType: 'json',
            success: function (response) {

                const elements = stripe.elements({
                    clientSecret: response.client_secret
                });
                const paymentElement = elements.create('payment');
                paymentElement.mount('#payment-element');

                const appearance = { /* appearance */};
                const options = {mode: 'billing'};
                const addressElement = elements.create('address', options);
                addressElement.mount('#address-element', {
                    fields: {
                        phone: 'always'
                    }
                });

                // Create an instance of the Link Authentication Element.
                const linkAuthenticationElement = elements.create("linkAuthentication");

                // Mount the Elements to their corresponding DOM node
                linkAuthenticationElement.mount("#link-authentication-element");

                const paymentForm = document.querySelector('#payment-form');
                paymentForm.addEventListener('submit', async (e) => {
                    // Avoid a full page POST request.
                    e.preventDefault();

                    // Disable the form from submitting twice.
                    paymentForm.querySelector('button').disabled = true;

                    let token = localStorage.getItem(SetSail.token_key);
                    // Confirm the card payment that was created server side:
                    let tld = document.domain.split('.').pop();
                    const {error} = await stripe.confirmPayment({
                        elements,
                        confirmParams: {
                            return_url: `${SetSail.clientManagerUrl}/me?token=${token}`
                        }
                    });
                    if (error) {
                        addMessage(error.message);

                        // Re-enable the form so the customer can resubmit.
                        paymentForm.querySelector('button').disabled = false;
                        return;
                    }
                });

            }
        })

    });

    $('#modal-center').on('shown', function () {
        prefillAllKnownField();
    });

    /**
     * check if current user is already authenticated
     */
    modalLoginSetSail.on('beforeshow', async function () {

        let token = localStorage.getItem(SetSail.token_key);
        let isAuthenticated = false;
        if (token && token.length > 0) {
            $.post('/wp-admin/admin-ajax.php?action=check_token', {
                'token': token
            }).done(function (response) {
                if (response.success) {
                    localStorage.setItem(SetSail.user, JSON.stringify(response.data));
                    goToCheckout();
                } else {
                    showLoginForm();
                }
            }).fail(function (error) {
                UIkit.modal.alert('Unable to reach the server' + error);
                isAuthenticated = false
            });
        } else {
            showLoginForm();
        }
    });

    loginSetSailForm.on('submit', function () {
        event.preventDefault();
        let formData = $(this).serialize();
        console.log("loginForm", formData);
        $.post(
            '/wp-admin/admin-ajax.php?action=api_login',
            formData
        ).done(function (r) {
            console.log("r", r)
            if (r.success) {
                saveUserInfoAndToken(r.data);
                goToCheckout();
            } else {
                // TODO: show error in the form for user
                UIkit.modal.alert(r.data);
            }
        }).fail(function (error) {
            UIkit.modal.alert('Impossible de joindre le serveur')
            console.log("error", error);
        })
    });

    /**
     * Register
     */
    registerSetSailForm.on('submit', function () {
        event.preventDefault();

        const password = document.getElementById("register-ss-password").value,
            confirmPassword = document.getElementById("register-ss-password_confirmation").value;

        if (password !== confirmPassword) {
            // Passwords don't match
            UIkit.modal.alert("Les mots de passe ne correspondent pas.");
            return false;
        }

        let formData = $(this).serialize();
        console.log("registerForm", formData);
        $.post(
            '/wp-admin/admin-ajax.php?action=api_register',
            formData
        ).done(function (r) {
            console.log("r", r)
            if (r.success) {
                saveUserInfoAndToken(r.data);
                goToCheckout();
            } else {
                // TODO: show error in the form for user
                UIkit.modal.alert(r.data);
            }
        }).fail(function (error) {
            UIkit.modal.alert('Impossible de joindre le serveur')
            console.log("error", error);
        })
    });

    if ($("#calendar-filter-view").length) {

        const calendarFilter = new VanillaCalendar('#calendar-filter-view', {
            type: 'multiple',
            months: 2,
            jumpMonths: 1,
            settings: {
                lang: 'fr-FR',
                range: {
                    disablePast: true,
                },
                selection: {
                    day: 'multiple-ranged',
                },
            },
            actions: {
                clickDay(event, self) {
                    if (self.selectedDates.length > 1 && typeof (self.selectedDates[0] !== 'undefined')) {
                        // console.log(self.selectedDates);
                        let date_from_filter_dom = jQuery('#date_from_filter'),
                            date_to_filter_dom = jQuery('#date_to_filter'),
                            date_filter = jQuery('#date_filter'),
                            date_from = self.selectedDates[0],
                            date_to = self.selectedDates[self.selectedDates.length - 1];

                        let currentStartDate = new Date(date_from),
                            currentStartDateMonth = currentStartDate.getMonth();

                        if (currentStartDateMonth === 6 || currentStartDateMonth === 7) {
                            const isValid = validDatesForJulyAndAugust(date_from, date_to);
                            if (!isValid) {
                                UIkit.modal.alert(SetSail.message_haute_saison);
                                return false;
                            }
                        }

                        date_from_filter_dom.val(date_from);
                        date_to_filter_dom.val(date_to);
                        date_filter.val(date_from + 'to' + date_to);

                        localStorage.setItem(SetSail.filter_date_from,date_from);
                        localStorage.setItem(SetSail.filter_date_to,date_to);

                        date_filter.trigger('change');
                        UIkit.modal("#calendar-filter-modal").hide();
                    }
                }
            }
        });
        calendarFilter.init();

        $('.input-calendar-trigger').click(function () {
            console.log('Popolop');
            UIkit.modal("#calendar-filter-modal").show();
        });

    }


    /**
     * TODO : check if we are on a fiche boat
     */




});

// Helper for displaying status messages.
const addMessage = (message) => {
    const messagesDiv = document.querySelector('#messages');
    messagesDiv.style.display = 'block';
    const messageWithLinks = addDashboardLinks(message);
    messagesDiv.innerHTML += `> ${messageWithLinks}<br>`;
    console.log(`Debug: ${message}`);
};

// Adds links for known Stripe objects to the Stripe dashboard.
const addDashboardLinks = (message) => {
    const piDashboardBase = 'https://dashboard.stripe.com/test/payments';
    return message.replace(
        /(pi_(\S*)\b)/g,
        `<a href="${piDashboardBase}/$1" target="_blank">$1</a>`
    );
};

function updatePriceBox(priceData) {
    console.log(priceData);

    let htmlContent = `
  <p class="uk-light ap-pricing">
    <label class="single-price-label">Location : </label>
    <br>
    <span class="ap-price uk-h3 ap-rental-price" data-rental-price="${priceData.prices.price}">
      ${formatNumberToFrenchCurrency(priceData.prices.price)}
      <span class="rental-unit uk-text-meta">( ${priceData.prices.all_days_count} jours )</span>
    </span>
  </p>`;
    jQuery(".priceBoxContainer").html(htmlContent);
    jQuery('input[name="booking_data"]').val(JSON.stringify(priceData));
    jQuery(".submitBooking").addClass("active");

    generateOptionsList(priceData.options);
}

function generateOptionsList(options) {
    let optionItems = "";

    jQuery.each(options, function (key, option) {
        optionItems += `<div class="optionItem">
      <label class="${option.obligatory ? "readonly" : ""}">
        <input
          type="checkbox"
          value="${option.id}"
          name="options[${option.name}]"
          ${option.obligatory ? "checked readonly" : ""}
          data-option-price="${option.price}"
          data-option-id="${option.id}"
        >
        <span></span>
        ${option.name}
      </label>
      <span>
        ${formatNumberToFrenchCurrency(option.price)}
      </span>
    </div>`;
    });

    jQuery(".optionListsItems").html(optionItems);
    jQuery(".optionLists").slideDown("fast", function () {
        getTotalPrice(true);
    });
}

function getTotalPrice(display) {
    let rentalPrice = jQuery(".ap-rental-price").data("rental-price");
    let optionPrice = 0;
    jQuery(".optionItem input:checked").each(function () {
        optionPrice += parseInt(jQuery(this).data("option-price"));
    });
    let total = rentalPrice + optionPrice;

    jQuery('#booking_total').val(total);

    if (display) {
        jQuery(".totalPriceValue").text(formatNumberToFrenchCurrency(total));
        jQuery(".totalPrice").addClass("show");
        return;
    }

    return total;
}

function formatNumberToFrenchCurrency(number) {
    return new Intl.NumberFormat('fr-FR', {
        style: 'currency',
        currency: 'EUR',
        minimumFractionDigits: 0,
        maximumFractionDigits: 0
    }).format(number);
}