// Calculate offset fot scrolling.
const offset = 120; // Margin from the top.
const rect = section.getBoundingClientRect();
const winPageOff = window.scrollY;

// Calculete the section current position.
const offsetPosition = (rect.top + winPageOff) - offset;

// Offset for mobile and tablet devices.
const mobileOffset = offsetPosition * 0.8;

// Set interval to check if the page has been scrolled.
// If so, adding underline and color to the current link.
const checkScroll = setInterval(()=> {

    // In case of mobile and tablet devices the opened menu
    // disappeares half way on the scrolling to the section. 
    if (window.innerWidth < 992){
        this.closeMobileMenu(offsetPosition, mobileOffset, offset);
    }
}, 100);

// Close the opened mobile menu on the scrolling to the section.
closeMobileMenu(offsetPosition, mobileOffset, offset) {
    if (window.scrollY - offsetPosition - offset <= (mobileOffset + offset) && 
        window.scrollY - offsetPosition - offset >= -(mobileOffset + offset) ) {
            const checkElm = document.querySelector('.mobile-toggler');
            checkElm.checked = false;                           
    }
}

// Top menu.
class TopMenu {
    constructor() {
        this.scrolled = false;
        this.runProcess();
    }

    runProcess() {
        this.grabElements(); // Grab necessary elements.
        this.setEvenetToLinks;
    }

    grabElements() {
        this.menuElm = document.querySelector('.menu-wrapper');
        this.menuLinks = document.querySelectorAll('.top-menu a');
    }

    get setEvenetToLinks() {
        this.menuLinks.forEach(link => {
            const sectionID = link.getAttribute('data-section');

            link.addEventListener('click', (e) => {
                e.preventDefault();
                
                // Scroll the page to the current section
                // and style the menu link accordingly.
                this.scrollPage(sectionID, link);
                
            })
        });
    }

    scrollPage(sectionID, link){

        if(sectionID){
            // Select section.
            const section = document.getElementById(`${sectionID}`);

            // Calculate offset fot scrolling.
            const offset = 120; // Margin from the top.
            const rect = section.getBoundingClientRect();
            const winPageOff = window.scrollY;

            // Calculete the section current position.
            const offsetPosition = (rect.top + winPageOff) - offset;

            // Offset for mobile and tablet devices.
            const mobileOffset = offsetPosition * 0.8;
            
            // Scroll window.
            window.scrollTo({
                top: offsetPosition,
                behavior: 'smooth',
            });

            // Set interval to check if the page has been scrolled.
            // If so, adding underline and color to the current link.
            const checkScroll = setInterval(()=> {

                // In case of mobile and tablet devices the opened menu
                // disappeares half way on the scrolling to the section. 
                if (window.innerWidth < 992){
                    this.closeMobileMenu(offsetPosition, mobileOffset, offset);
                }

                // If the page has been scrolled. 
                if (window.scrollY - offsetPosition <= offset && 
                    window.scrollY - offsetPosition >= -offset ) {
                    
                        // Remove active class.
                    this.menuLinks.forEach(l => {

                        l.style.color = '#dcf1b4';

                        if (window.innerWidth < 992)
                            l.style.color = '#000000';

                        l.classList.remove('active');
                    })
                    
                    link.classList.add('active'); // Add active class.
                    link.style.color = '#d5f891'; // Change link color.

                    clearInterval(checkScroll);
                }
            }, 100);
        }
    }

    // Close the opened mobile menu on the scrolling to the section.
    closeMobileMenu(offsetPosition, mobileOffset, offset) {
        if (window.scrollY - offsetPosition - offset <= (mobileOffset + offset) && 
            window.scrollY - offsetPosition - offset >= -(mobileOffset + offset) ) {
                const checkElm = document.querySelector('.mobile-toggler');
                checkElm.checked = false;                           
        }
    }

    // When the page is scrolled more than 200px 
    // adjust it's styles and animate it.
    visibility() {
        if( window.scrollY > 200 ) {
            this.menuElm.classList.remove('top');

            if(!this.scrolled) {
                this.menuElm.style.transform = 'translateY(-200px)';
            }

            setTimeout(()=> {
                this.menuElm.style.transform = 'translateY(0)';
                this.scrolled = true;
            }, 200);

        } else {
            this.menuElm.classList.add('top');
            this.scrolled = false;
        }

    }

}


// Initialize. 
const topMenu = new TopMenu();

class AnimateSegment {
    constructor(animeData)  {
        this.animeData = animeData;
        this.margin = 178;
    }

    // Executor.
    run = () =>  {

        // Extract keys and values from the dictionary.
        for ( const [selector, classes] of Object.entries(this.animeData)) {
            
            // Grab all elements by selector.
            const elements = document.querySelectorAll(selector);

            if (elements.length) { // If element exists.

                elements.forEach(element => {

                    // If element is in view. 
                    if (this.isInViewport(element)) {
                        // Add classes.
                        element.classList.add(...classes);
                    }
                    
                    // If element is out view. 
                    if (this.isOutViewport(element)) {
                        // Remove classes.
                        element.classList.remove(...classes);
                    }
                })
            }
        }

    }

    // Check if the element is inside of window.
    isInViewport(element){
        const rect = element.getBoundingClientRect();
        return (
            rect.top >= 0 &&
            //rect.left >= 0 &&
            rect.bottom <=
            (window.innerHeight)
        );
    };

    // Check if the element is ouside the window.
    isOutViewport(element) {
        // Get the element boundaries.
        const rect = element.getBoundingClientRect();

        // Outside of the window.
        return (
            rect.top <= -this.margin  || 
            rect.bottom >= (   
                    window.innerHeight || 
                    document.documentElement.clientHeight
                ) + this.margin
        );
    }
}

// Data for html elements animation.
// The key represents a selector and
// the value the css classes for transition.
const animeData = {
    '.logo': ['logo-anime', 'logo-anime1'],
    '.desktop-menu': ['desktop-menu-anime'],
    '.welcome-title': ['welcome-title-anime'],
    '.welcome-text': ['welcome-text-anime'],
    '.register-btn': ['register-btn-anime'],
    ...
}

// Segment animation.
const card = new AnimateSegment(animeData);

class ShopList {
    constructor (url) {
        this.url = url; // Fetch API url.
        this.appendedID = ''; // ID for new fetched post container.
        this.rowID = ''; // Appended row id.
        this.appendedRow = ''; // Newly appended row.
        this.postWrapper = ''; // After click the newly loaded posts wrapper.  
        this.runProcess(); // Fetch new posts.
    }

    
    async runProcess() {
        this.grabElements(); // STEP-O1: Grab necessary elements.
        this.addEventToTheButton(); // STEP-O2: Add the click event to the button.
        this.data = await this.getPosts(); // STEP-O3: Fetch new posts.
        this.renderShops(); // STEP-O4: Render new posts.
        if (this.click) { // Truck post image loading.
            await this.allPostLoaded();
        }  
    }

    // Grab all necessary elements.
    grabElements() { // STEP-O1.
        this.loadMoreBtn = document.getElementById('l-more');  // Loading button.
        this.loadUpbtn = document.getElementById('l-up'); // Close loaded posts btn.
        this.loadContent = document.querySelector('.load-content'); // Loading button content.
        this.shopLoading = document.querySelector('.shop-loading'); // Loading icon.
    }

    // Add a click event on the button.
    addEventToTheButton() { // STEP-O2.
        // Load more post button.
        this.loadMoreBtn.addEventListener('click', (e) => {
            e.preventDefault();
            this.click = true;
            this.eventFunc();
        });

        // Close loaded posts button.
        this.loadUpbtn.addEventListener('click', (e) => {
            e.preventDefault();
            this.loadUpFunc();
        });
    }

    // Load more event listener function.
    async eventFunc() {
        this.index = 0;

        this.loadMoreBtn.disabled = true; // Disable button.
        this.loadMoreBtn.classList.add('disabled-btn'); // Disabled button styles.
        this.loadContent.classList.add('d-none'); // Hide button content.
        this.shopLoading.classList.add('show'); // Show loading. 

        // Grab the next page url.
        if (this.data.next) {
            this.url = this.data.next;
        }
        
        // Grab next page data.
        await this.runProcess();
    }
    
    // Close loaded posts event listener function.
    loadUpFunc() {
        // Grab the necessary elements.
        const loadedBlocks = document.querySelectorAll('.shop-appended');
        const shopHeading = document.getElementById('shop-list');

        loadedBlocks.forEach(block => {
            block.remove(); // Remove loaded posts.
            this.url = `http://127.0.0.1:8000/api/shoplist/?page=2&page_size=16`
            this.click = false; // Truck the click event.
            this.index = 0;
            this.appendedID = ''; // ID for new fetched post container.
            
            // Toggle visibilities of the read more and load up buttons.
            this.loadMoreBtn.classList.remove('d-none');
            this.loadUpbtn.classList.remove('d-block');

            shopHeading.scrollIntoView({ behavior: 'smooth' });
        });
    }

    // Check if all posts images has been loaded.
    async allPostLoaded() {
        const images = document.querySelectorAll(`.shop-list #${this.appendedID} img`);
        var totalImages = images.length;
        let loadedImages = 0;

        images.forEach(img => {
            if (img.complete) {
                loadedImages++;
            } else {
                img.onload = () => {
                    loadedImages++;
                    if (loadedImages === totalImages) {
                        this.allImagesLoaded();
                    }
                };
            }
        });

        if (loadedImages === totalImages ) {
            this.allImagesLoaded();
        }
    }

    // When all images has been loaded.
    allImagesLoaded() {
        // Grab the new posts container.
        const appended = document.querySelector(`#${this.appendedID}`);
        // Grab new posts rows.    
        const newRows = document.querySelectorAll(`#${this.appendedID} .shop-row`);

        appended.classList.remove('d-none'); // Show container.
        appended.classList.add('shop-fade-in'); // Add CSS animation to the container.

        this.loadMoreBtn.disabled = false; // Disable button.
        this.loadMoreBtn.classList.remove('disabled-btn'); // Disabled button styles.

        this.loadContent.classList.remove('d-none'); // Hide button content.
        this.shopLoading.classList.remove('show'); // Hide loading.

        // Toggle the show more and load up buttons if there are no more posts.
        if(!this.data.next) {
            this.hideButton(); 
        }
        
        // As soon as the css animation finishes,
        // add the trans and fade-in classes to the new shop-row.
        appended.addEventListener('animationend', () => {
            newRows.forEach(row => {
                row.classList.add('trans', 'fade-in');
            });
        });

        appended.scrollIntoView({ 
            behavior: 'smooth',
            block: 'start' 
        });
        
    }

    // If there is no more post on the next page, hide the button.
    hideButton() {
        this.loadMoreBtn.classList.add('d-none');
        this.loadUpbtn.classList.add('d-block');
    }

    // Try to fetch new posts otherwise rise an error.
    async getPosts() { // STEP-O3.
        try {
            const data = await this.loadData();
            return data;
        } catch (error) {
            console.log('Error', error);
        }
    }

    // Fetch new post, convert to JSON and return it.
    async loadData() {
        const response = await fetch(`${this.url}`);
        const data = await response.json();
        return data;
    }

    // Create HTML and render it.
    renderShops() { // STEP-O4.
        // Grab the posts container.
        var container = document.querySelector('.shop-list');

        // After click, wrappe the newly loaded posts with wrapper.
        if (this.click) {
            container.appendChild(this.appendedWrapper());
        }

        // Loop through new posts.
        this.data.results.forEach((shop, index) => {
            
            // Append new row.
            if (index % this.postIndex === 0) {
                if(this.click){
                    this.postWrapper.appendChild(this.row());
                } else {
                    container.appendChild(this.row());
                }
            }

            // Crete col and append into row.
            const col = this.col(shop);
            this.appendedRow.appendChild(col);

        });
    }


    // The wrapper for the newly loaded posts after clicking on the button.
    appendedWrapper() {
        const elm = document.createElement('div');

        elm.classList.add('shop-appended', 'd-none');
        this.appendedID = `appended-${this.appendedID}`;
        elm.id = this.appendedID;

        this.postWrapper = elm;
        return elm;
    }

    // Get index for posts per row based on the devices.
    get postIndex() {
        const wIw =  window.innerWidth;
        if (wIw <=576) {
            return 2;
        } else if (wIw > 576 && wIw <=992) {
            return 3;
        } else {
            return 4;
        }
    }

    // Create the row element.
    row() {
        const row = document.createElement('div');
        this.rowID = `row-${this.generateUniqueId}`;
        if (!this.click){
            row.classList.add('row', `row-cols-${this.postIndex}`, 'align-items-center', 'shop-row', 'text-center', 'trans');
        } else {
            row.classList.add('row', `row-cols-${this.postIndex}`, 'align-items-center', 'shop-row', 'text-center');
        }

        row.id = this.rowID;

        this.appendedRow = row;
        return row;
    }
  
    // Generate unique ID.
    get generateUniqueId() {
        return Math.random().toString(16).slice(2, 10);
    }

    // Create post element.
    col(shop) {
        // Create the necessary elements.
        const col = document.createElement('div');
        const link = document.createElement('a');
        const img = document.createElement('img');

        // Add attributes.
        col.classList.add('col', 'text-center');
        link.classList.add('shop-link', 'border');
        link.href = `${shop.link}`;
        link.target = `_blank`;
        img.src = `${shop.image}`;

        link.appendChild(img); // Append the image into the link.
        col.appendChild(link); // Append the link into the column.

        return col;
    }

}

// This class handles the CSRF token cookie.
class Cookie {
    constructor(name) {
        this.name = name;
    }

    // This function decodes the cookie value.
    decodeCookie(cookie) {
            return decodeURIComponent(cookie.split('=')[1]);
    }

    // This function gets the cookie value.
    get(){
        const cookieValue = document.cookie
        .split('; ')
        .find(raw => raw.startsWith(this.name + '='));
        return cookieValue ? this.decodeCookie(cookieValue) : null;

    }
}


/* This class adds event listeners to the send email buttons,
    sends the email to the server and toggles the spinner icon appearance. */
class SendEmail {
    constructor(url) {
        this.url = url;
        this.csrfToken = new Cookie('csrftoken');
        this.buttons = document.querySelectorAll('.send-email');
        this.spinnerElm = document.querySelector('.profile-wrapper .spinner-border');
        this.addEvents();
    }

    /* Add event listeners to the send email buttons. */
    addEvents() {               
        this.buttons.forEach(button => {
            button.addEventListener('click', (e) => {
                e.preventDefault();

                const button = e.target // Button that was clicked.
                const spinner = e.target.parentNode.querySelector('.spinner-border'); // Current spinner icon.
                
                this.showSpinner(button, spinner); // Show spinner icon.
                this.sendEmail(button, spinner); // Send email to the server.
            });
        });
    }

    // Show spinner icon.
    showSpinner(button, spinner) {
        button.classList.add('d-none'); //  Hide the button.
        spinner.classList.remove('d-none'); // Show the spinner.
    }

    // Send email to the server.
    sendEmail(button, spinner) {
        fetch(this.url, {
            method: 'POST',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json',
                'X-CSRFToken': this.csrfToken.get()
            }
        }).then(response => {
            if (response.status === 200) {
                this.hideSpinner(button, spinner); // Hide spinner.
            } else {
                console.log('ვერ მოხერხდა გაგზავნა.');
            }
        });
    }

    // Hide spinner icon.
    hideSpinner(button, spinner) {
        button.classList.remove('d-none'); // Show the button.
        spinner.classList.add('d-none'); // Hide the spinner.
    }

}

// Initialize the class.
new SendEmail('/profile/send-email/');