const overlayContent = document.createElement('div');
overlayContent.id = 'template-modal-overlay';
overlayContent.classList = 'modal-hide';

const searchIcon = document.getElementById('search-icon');
const searchFilters = document.getElementById('template-filters');

// searchIcon.addEventListener('click', function(){
//     showDropdown(searchFilters);
// });

// // <select> element displays its options on mousedown, not click.
// showDropdown = function (element) {
//     let event;
//     event = document.createEvent('MouseEvents');
//     event.MouseEvent('mousedown', true, true, window);
//     element.dispatchEvent(event);
// };

// // This isn't magic.
// window.runThis = function () { 
//     showDropdown(searchFilters);
// };


const designTemplate = document.querySelectorAll('.showit-design-template-thumbnail');

for (i = 0; i < designTemplate.length; i++){

    const iconMobile = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M15.8,3H8.2C7.6,3,7,3.6,7,4.3v15.5C7,20.4,7.6,21,8.2,21h7.5c0.7,0,1.2-0.6,1.2-1.2V4.3C17,3.6,16.4,3,15.8,3z M12,20 c-0.5,0-0.9-0.4-0.9-0.9c0-0.5,0.4-0.9,0.9-0.9s0.9,0.4,0.9,0.9C12.9,19.6,12.5,20,12,20z M16,17.5H8V6h8V17.5z"/></svg>';
    const iconDesktop = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M21.5,3h-19C1.7,3,1,3.7,1,4.5v12.1C1,17.5,1.7,18,2.5,18H10c0,0,0,0,0,1c0,0.1,0,0.2,0,0.3c0,0.1,0,0.2,0,0.3 c0,0.1,0,0.1-0.1,0.2c0,0.1-0.1,0.2-0.2,0.3c0,0,0,0.1-0.1,0.1c-0.2,0.2-0.5,0.4-0.8,0.5c0,0,0,0,0,0c-0.1,0-0.3,0.1-0.4,0.1 c0,0,0,0,0,0c-0.5,0.1-0.8,0-0.9,0c-0.3,0-0.3,0.3,0,0.3H8h8h0.6c0.3,0,0.3-0.3,0-0.3c-0.1,0-0.5,0-0.9,0c0,0,0,0,0,0 c-0.1,0-0.3,0-0.4-0.1c0,0,0,0,0,0c-0.3-0.1-0.6-0.2-0.8-0.5c0,0,0-0.1-0.1-0.1c-0.1-0.1-0.1-0.2-0.2-0.3c0-0.1-0.1-0.1-0.1-0.2 c0-0.1,0-0.2,0-0.3c0-0.1,0-0.2,0-0.3c0-1,0-1,0-1h7.5c0.8,0,1.5-0.5,1.5-1.4V4.5C23,3.7,22.3,3,21.5,3z M21,14H3V5h18V14z"/></svg>';
    const iconClose = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><polygon points="21.54 3.88 20.12 2.46 12 10.59 3.88 2.46 2.46 3.88 10.59 12 2.46 20.12 3.88 21.54 12 13.41 20.12 21.54 21.54 20.12 13.41 12 21.54 3.88"/></svg>';
    
    let fullImageURL_d = designTemplate[i].style.backgroundImage.split('"')[1];
    let fullImageURL_m = designTemplate[i].dataset.mobileScreenshot;
    let designTitle = designTemplate[i].dataset.templateName;
    let designPrice = designTemplate[i].dataset.price;
    let designUrl = designTemplate[i].dataset.templateUrl;
    let demoUrl = designTemplate[i].dataset.demoUrl;

    const designFilters = document.getElementById('template-filters');

    if(i > 8){
        designTemplate[i].classList.add('showit-design-template-hidden');
    }

    designFilters.addEventListener('change', function(){
        designTemplate.forEach(
            // function(el){
            //     if(el.classList.contains(this.value)){
            //         el.style.display = 'none'
            //     }
            // }
            (el, i)=>el.style.display = el.classList.contains(this.value) && (this.value != 'all-templates' || i < 9) ? 'block':'none'
        )
    }); 

    let designPriceUrl = '<p class="masonry-overlay-price">This '+designPrice+' template comes preloaded in your Showit account</p>';
    let designTitleUrl = designTitle;

    if( designPrice == "premium" ){
        designPriceUrl = '<a href="'+designUrl+'" target="_blank" class="masonry-overlay-price">This <span>'+designPrice+' template</span> can be purchased in our design store</a>';

        designTitleUrl = '<a href="'+designUrl+'" target="_blank" class="masonry-overlay-title-link">'+designTitle+'</a> '
    }

    designTemplate[i].addEventListener('click', function(){

        overlayContent.classList.toggle('modal-hide');
        
        overlayContent.innerHTML = 
        '<div class="masonry-overlay-wrapper masonry-overlay-view-desktop">'+
        '	<div class="masonry-overlay-content">'+
        '		<div class="masonry-overlay-clickout"></div>'+
        '		<div class="masonry-overlay-navbar">'+
        '			<div class="masonry-overlay-navbar-container">'+
        '				<div class="masonry-overlay-buttons">'+
        '                   <div id="screensize-icons">'+
        '   					<a href="#" id="masonry-icon-desktop" title="Desktop Layout">'+iconDesktop+'</a>'+
        '                       <a href="#" id="masonry-icon-mobile" title="Mobile Layout">'+iconMobile+'</a>'+
        '                   </div>'+
        '                   <a href="#" class="template-action-button">Start Your Free Trial</a>'+
        '                   <a href="#" class="masonry-overlay-close" title="Close">'+iconClose+'</a>'+
        '				</div>'+
        '			</div>'+
        '		</div>'+
        '		<div class="masonry-overlay-preview">'+
        '			<div class="masonry-overlay-footer" style="padding-top:90px">'+
        '				<h1 class="masonry-overlay-title">'+designTitleUrl+'</h1>'
                        +designPriceUrl+
        '               <p><a class="template-action-button" href="#">Start Your Free Trial</a></p>'+
        '			</div>'+
        '			<img src="'+fullImageURL_d+'" class="preview-image-d"/>'+
        '			<img src="'+fullImageURL_m+'" class="preview-image-m"/>'+
        '           <div id="demo-text"><a href="'+ demoUrl +'" target="_blank">View Live Demo</a> <button type="button" id="demo-close">'+ iconClose +'</button></div>'+
        '			<div class="masonry-overlay-footer">'+
        '				<h1 class="masonry-overlay-title">'+designTitle+'</h1>'+
        '               <a class="template-action-button" href="#">Start Your Free Trial</a>'+
        '				<a class="masonry-overlay-close" href="#">&times; Close Preview</a>'+
        '			</div>'+
        '		</div>'+
        '	</div>'+
        '</div>';

        document.body.append(overlayContent);

        const templateClostBTN = document.querySelectorAll('.masonry-overlay-close');

        templateClostBTN.forEach( el => el.addEventListener('click', event => {
            event.preventDefault();
            overlayContent.classList.toggle('modal-hide'); 
        }));

        const clickOut = document.querySelectorAll('.masonry-overlay-clickout')[0];
        clickOut.addEventListener('click', function(){
            overlayContent.classList.toggle('modal-hide'); 
        });

        const freeTrialBTN = document.querySelectorAll('.template-action-button');
        const webinarModalContent = document.getElementById('webinar-modal-overlay');
        freeTrialBTN.forEach( el => el.addEventListener('click', event => {
            event.preventDefault();
            overlayContent.classList.toggle('modal-hide');
            webinarModalContent.classList.toggle('modal-hide');
        }));

        const overlayWrapper = document.querySelectorAll('.masonry-overlay-wrapper')[0];
        const mobileBTN = document.getElementById('masonry-icon-mobile');
        mobileBTN.addEventListener('click', function(event){
            event.preventDefault();
            overlayWrapper.classList.remove('masonry-overlay-view-desktop');
            overlayWrapper.classList.add('masonry-overlay-view-mobile');
            overlayWrapper.scroll({
                top: 0,
                behavior: 'smooth'
            });
            
        });

        const desktopBTN = document.getElementById('masonry-icon-desktop');
        desktopBTN.addEventListener('click', function(event){
            event.preventDefault();
            overlayWrapper.classList.remove('masonry-overlay-view-mobile');
            overlayWrapper.classList.add('masonry-overlay-view-desktop');
            overlayWrapper.scroll({
                top: 0,
                behavior: 'smooth'
            });
        });

        const previewImage = document.querySelectorAll('.preview-image-d')[0];
        const previewImageMobile = document.querySelectorAll('.preview-image-m')[0];
        const helperText = document.getElementById('demo-text');

        [previewImage, previewImageMobile].forEach(function(element){
            element.addEventListener('click', function(event){
                helperText.classList.add('visible');
                helperText.style.top = 328 + event.offsetY + "px";

                if((event.pageX - element.getBoundingClientRect().left) > (element.width - 200)){
                    helperText.style.transform = "translateX(-200px)";
                } else{
                    helperText.style.transform = "";
                }
                helperText.style.left =  element.width - (element.getBoundingClientRect().right - event.pageX) + "px";
            });
        });
        

        const helperTextClose = document.getElementById('demo-close');
        helperTextClose.addEventListener('click', function(e){
            helperText.classList.remove('visible');
            console.log('click x');
        });



        const navbarActionBTN = document.querySelectorAll('.masonry-overlay-buttons .template-action-button')[0];

        document.addEventListener('scroll', function() {
            if(overlayWrapper.scrollTop >= 180){
                navbarActionBTN.classList.add('visible-template-action-button');
            } else{
                navbarActionBTN.classList.remove('visible-template-action-button');
            }
        }, true);
    });
}