window.addEventListener('load', function() {
    function setCookie(name, value, days) {
        const expirationDate = new Date();
        expirationDate.setDate(expirationDate.getDate() + days);
        const cookieValue = encodeURIComponent(value) + (days ? `; expires=${expirationDate.toUTCString()}` : '');
        document.cookie = `${name}=${cookieValue}; path=/`;
    }
    
    function getCookie(name) {
        const cookies = document.cookie.split(';');
        for (const cookie of cookies) {
            const [cookieName, cookieValue] = cookie.trim().split('=');
            if (cookieName === name) {
                return decodeURIComponent(cookieValue);
            }
        }
        return null; // Cookie not found
    }
    function removeCookie(name) {
        document.cookie = `${name}=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/`;
    }
    
    function change_message_notice(){
        return `<p>If you wish to change your plan, please contact <a href="mailto:info@musicnovascotia.ca">info@musicnovascotia.ca</a></p>
`;
    }
    Element.prototype.addClickHandler = function(callback){
        this.addEventListener('click', function(event) {
            event.preventDefault()
            event.stopPropagation()
            callback(event)
        });
    };
    
    window.stripe = Stripe('pk_live_h3nyec7ciNjS0oby4BAbecN3');
    
    const genericErrorMessage = 'Sorry, your payment couldn\'t be processed at this time. If the problem presists, please contact us'
    
    function paymentFetch(action, payload){
        const method = 'POST'
        const headers = {'Content-Type': 'application/json'}
        return fetch(
            '/wp-admin/admin-ajax.php?action=handle_' + action + '_submission',
            {method, headers, body: JSON.stringify(payload)}
            )
        }
        
        function successMessage(message){
            paymentResponseModal.showModal()
            paymentResponseModal.querySelector('p').innerText = message
            paymentResponseModal.className = 'success'
        }
        
        function errorMessage(message){
            paymentResponseModal.showModal()
            paymentResponseModal.querySelector('p').innerText = message
            paymentResponseModal.className = 'error'
        }
        
        function noticeMessage(message){
            paymentResponseModal.showModal()
            const existingParagraph = paymentResponseModal.querySelector('p')
            existingParagraph.insertAdjacentHTML('beforebegin', message)
            existingParagraph.remove()
            paymentResponseModal.className = 'notice'
        }
        
        function genericMessage(message, mode){
            mode === 'success' ? successMessage(message) : errorMessage(message)
        }
        
        function purchase(membership_level, artist_id) {
            paymentFetch('purchase', {membership_level, artist_id})
            .then(response => response.json())
            .then(session => {
                if(typeof session.free === "string"){
                    successMessage("Membership updated successfully!")
                }else{
                    window.stripe.redirectToCheckout({ sessionId: session.id })
                        .then(r => errorMessage(r.error.message));
                }
                
            })
            .catch(() => errorMessage(genericErrorMessage));
        }
        
        function cancelMembership(artist_id) {
            paymentFetch('cancel', {artist_id})
            .then(response => {
                response.json().then(response => {
                    genericMessage(response.message, response.error ? 'error' : 'success')
                })
            })
            .catch(error => (errorMessage(error.json().message)))
        }
        
        const cancelSubscriptionButton = document.querySelector('#cancel-subscription')
        const cancelSubscriptionDialog = document.querySelector('#cancel-confirmation')
        const paymentResponseModal = document.querySelector('#response-modal')
        
        const planCancelButton = document.querySelector('.plan-auto-renew .cancel-button')
        const changePaymentMethodButton = document.querySelector('#change-payment-method')
        const updateBillingDialog = document.querySelector('#update-billing-form')
        const updateBillingForm = document.querySelector('#update-billing-form form')
        
        if(cancelSubscriptionButton){
            cancelSubscriptionButton.addClickHandler(() => {
                cancelSubscriptionDialog.showModal()
                cancelSubscriptionDialog.querySelector('#confrim-membership-cancel').addClickHandler(() => {
                    cancelMembership(cancelSubscriptionButton.dataset.artist)
                    cancelSubscriptionDialog.close()
                })
                cancelSubscriptionDialog.querySelector('#close-membership-cancel').addClickHandler(() => (cancelSubscriptionDialog.close()))
            })
        }
        
        if(planCancelButton){
            planCancelButton.addClickHandler(() => (cancelSubscriptionButton.click()))
        }
        
        if(changePaymentMethodButton){
            changePaymentMethodButton.addClickHandler(() => {
                const artist_id = changePaymentMethodButton.dataset.artist
                paymentFetch('changecard', {artist_id})
                .then(response => {
                    response.json().then(response => {
                        if(response.customer){
                            const elements = window.stripe.elements();
                            const cardElement = elements.create('card', {
                                style: {
                                    base: {
                                        color: '#32325d',
                                        fontFamily: 'Oswald,sans-serif',
                                        fontSize: '1.5rem',
                                        '::placeholder': {
                                            color: '#aab7c4'
                                        }
                                    },
                                    invalid: {
                                        color: '#fa755a',
                                        iconColor: '#fa755a'
                                    }
                                }
                            })
                            cardElement.mount('#card-element')
                            updateBillingDialog.showModal()
                            updateBillingForm.addEventListener('submit', async (e) => {
                                e.stopPropagation()
                                e.preventDefault()
                                
                                const createPaymentResponse = await window.stripe.createPaymentMethod({
                                    type: 'card',
                                    card: cardElement,
                                })
                                
                                if (!createPaymentResponse.paymentMethod) {
                                    errorMessage(genericErrorMessage)
                                } else {
                                    const customer_id = response.customer
                                    const payment_method_id = createPaymentResponse.paymentMethod.id
                                    paymentFetch('payment_attachment', {artist_id, customer_id, payment_method_id})
                                    .then(attachPaymentResponse => {
                                        attachPaymentResponse.json().then(attachPaymentResponse => {
                                            updateBillingDialog.close()
                                            genericMessage(attachPaymentResponse.message, attachPaymentResponse.success ? 'success' : 'error')
                                        })
                                    })
                                }
                            })
                        }else{
                            errorMessage(response.message)
                        }
                    })
                })
                .catch(e => (errorMessage(e.json().message)))
            })
        }
        
        function bindSubscriptionButtons()
        {
            const isSignupForm = document.querySelectorAll('#signup-form').length > 0;
            const subscriptionButtons = document.querySelectorAll('button.subscription-payment')

            if(isSignupForm){
                subscriptionButtons.forEach((button) => {
                    button.addClickHandler(() => {
                        subscriptionButtons.forEach(b => {
                            b.closest('div.plan-block').classList.remove('current-plan')
                        })
                        button.closest('div.plan-block').classList.add('current-plan')
                    })
                })
            }else{
                subscriptionButtons.forEach((button) => {
                    button.addClickHandler(() => {
                        if(parseInt(button.dataset.artist) === 0){
                            setCookie('signup-plan', button.dataset.level, 30)
                            // document.querySelector('#signup-instead').click()
                            window.location = '/sign-up'
                        }else{
                            button.hasAttribute('data-change-plan') ? noticeMessage(change_message_notice()) : purchase(button.dataset.level, button.dataset.artist)
                        }
                    })
                })
            }            
        }
        
        bindSubscriptionButtons()
        
        document.querySelectorAll('[data-hydrate]').forEach(element => {
            let hook = element.getAttribute('data-hydrate')
            const isSignupForm = document.querySelectorAll('#signup-form').length > 0;
            
            var xhr = new XMLHttpRequest();
            xhr.open('GET', '/wp-admin/admin-ajax.php?action=' + hook );
            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
            xhr.onload = function() {
                if (xhr.status === 200) {
                    element.innerHTML = xhr.responseText
                    
                    if(isSignupForm){
                        document.querySelectorAll('.plan-block').forEach(planBlock => {
                            const planTitle = planBlock.querySelector('h2').innerText
                            const planPrice = planBlock.querySelector('div>h2.price').innerText
                            const planSelected = planBlock.classList.contains('current-plan')
                            const buttonLevel = planBlock.querySelector('button').dataset.level
                            
                            planBlock.querySelector('h2').remove()
                            planBlock.querySelector('div').remove()
                            const planDescription = planBlock.innerText

                            const newButton = document.createElement('button')
                            newButton.className = 'subscription-payment'
                            newButton.setAttribute('data-artist', '0')
                            newButton.setAttribute('data-level', planTitle)
                            newButton.textContent = planTitle
                            const newButtonWrapper = document.createElement('div')
                            newButtonWrapper.appendChild(newButton)

                            const newPrice = document.createElement('div')
                            newPrice.className = 'signup-price'
                            newPrice.textContent = planPrice

                            const newInfo = document.createElement('div')
                            newInfo.className = 'subscription-info'
                            const newInfoIcon = document.createElement('i')
                            newInfoIcon.innerText = '?'
                            const newInfoText = document.createElement('span')
                            newInfoText.innerText = planDescription
                            newInfo.appendChild(newInfoIcon)
                            newInfo.appendChild(newInfoText)

                            planBlock.innerText = ''
                            planBlock.appendChild(newButtonWrapper)
                            planBlock.appendChild(newInfo)
                            planBlock.appendChild(newPrice)

                        })
                    }

                    bindSubscriptionButtons()
                }
            }
            xhr.send()
        })
    })