// import html2canvas from 'html2canvas';
// import * as JsPDF from 'jspdf';

window.WPRMPrint = {
    args: {},
    setArgs( args ) {
        this.args = args;
        document.dispatchEvent( new Event( 'wprmPrintArgs' ) );
    },
	init() {
        this.checkToggles();

        // On click print button.
        const printButton = document.querySelector( '#wprm-print-button-print' );
        if ( printButton ) {
            printButton.addEventListener( 'click', (e) => {
                e.preventDefault();
                this.onClickPrint();
            });
        }

        // On click toggle.
        const toggles = [ ...document.querySelectorAll( '.wprm-print-toggle' )];

        for ( let toggle of toggles ) {
            // Event listener.
            toggle.addEventListener( 'change', (e) => {
                this.onClickToggle( toggle );
            });

            // Initial state.
            this.onClickToggle( toggle );
        }

        // On click Email.
        const emailButton = document.querySelector( '#wprm-print-button-email' );
        if ( emailButton ) {
            emailButton.addEventListener( 'click', (e) => {
                e.preventDefault();
                this.onClickEmail();
            });
        }

        // On click PDF.
        const pdfButton = document.querySelector( '#wprm-print-button-pdf' );
        if ( pdfButton ) {
            pdfButton.addEventListener( 'click', (e) => {
                e.preventDefault();
                this.onClickPdf();
            });
        }

        // Size changer.
        this.sizeChanger = document.querySelector( '#wprm-print-size-container' );
        this.initSizeChanger();

        // Add padding at bottom of recipe template to fit footer ad.
        const footerAd = document.querySelector( '#wprm-print-footer-ad' );
        if ( footerAd ) {
            const footerAdHeight = footerAd.offsetHeight;
            document.querySelector( 'body' ).style.paddingBottom = footerAdHeight + 'px';
        }

        // Optional remove links.
        if ( window.hasOwnProperty( 'wprm_print_settings' ) && window.wprm_print_settings.print_remove_links ) {
            this.removeLinks();
        }

        // Trigger init event.
        document.dispatchEvent( new Event( 'wprmPrintInit' ) );

        // Check for print args set in local storage. Needs to happen after init.
        let args = localStorage.getItem( 'wprmPrintArgs' );
        localStorage.removeItem( 'wprmPrintArgs' );

        if ( args ) {
            args = JSON.parse( args );
            this.maybeSetStoredArgs( args );
        }
    },
    maybeSetStoredArgs( args ) {
        if ( ! args ) {
            return;
        }

        if ( args.hasOwnProperty( 'id' ) ) {
            const firstRecipe = document.querySelector( '#wprm-print-recipe-0' );
            const firstRecipeId = firstRecipe && firstRecipe.dataset.hasOwnProperty( 'recipeId' ) ? parseInt( firstRecipe.dataset.recipeId ) : false;

            if ( firstRecipeId && firstRecipeId === parseInt( args.id ) ) {
                this.setArgs( args );
            }
        } else if ( args.hasOwnProperty( 'collection' ) && args.hasOwnProperty( 'recipes' ) ) {
            const collectionPrintApp = document.querySelector( '#wprm-recipe-collections-print-app' );

            if ( collectionPrintApp ) {
                this.setArgs( args );
            }
        }
    },
    removeLinks() {
        const recipeCards = document.querySelectorAll( '#wprm-print-content .wprm-print-recipe' );

        for ( let recipeCard of recipeCards ) {
            const links = recipeCard.querySelectorAll( 'a:not(.wprm-recipe-link)' );

            for ( let link of links ) {
                link.outerHTML = '<span>' + link.innerHTML + '</span>';
            }
        }
    },
    checkToggles() {
        // Check if recipe image is present.
        const images = document.querySelectorAll( '.wprm-recipe-image' );

        if ( ! images.length ) {
            const toggle = document.querySelector( '#wprm-print-toggle-recipe-image' );
            if ( toggle ) {
                toggle.parentNode.style.display = 'none';
            }
        }

        // Check if recipe equipment is present.
        const equipment = document.querySelectorAll( '.wprm-recipe-equipment-container' );

        if ( ! equipment.length ) {
            const toggle = document.querySelector( '#wprm-print-toggle-equipment' );
            if ( toggle ) {
                toggle.parentNode.style.display = 'none';
            }
        }

        // Check if ingredient images are present.
        const ingredientMedia = document.querySelectorAll( '.wprm-recipe-ingredient-image' );

        if ( ! ingredientMedia.length ) {
            const toggle = document.querySelector( '#wprm-print-toggle-recipe-ingredient-media' );
            if ( toggle ) {
                toggle.parentNode.style.display = 'none';
            }
        }

        // Check if notes are present.
        const notes = document.querySelectorAll( '.wprm-recipe-notes-container' );

        if ( ! notes.length ) {
            const toggle = document.querySelector( '#wprm-print-toggle-recipe-notes' );
            if ( toggle ) {
                toggle.parentNode.style.display = 'none';
            }
        }

        // Check if nutrition label is present.
        const nutrition = document.querySelectorAll( '.wprm-nutrition-label-container' );

        if ( ! nutrition.length ) {
            const toggle = document.querySelector( '#wprm-print-toggle-recipe-nutrition' );
            if ( toggle ) {
                toggle.parentNode.style.display = 'none';
            }
        }
    },
    onClickToggle( toggle ) {
        // Get elements to toggle.
        let elems = [];
        if ( 'wprm-print-toggle-recipe-image' === toggle.id ) {
            elems = document.querySelectorAll( '.wprm-recipe-image, .wprm-condition-field-image:not(.wprm-condition-inverse)' );
        } else if ( 'wprm-print-toggle-recipe-equipment' === toggle.id ) {
            elems = document.querySelectorAll( '.wprm-recipe-equipment-container' );
        } else if ( 'wprm-print-toggle-recipe-ingredient-media' === toggle.id ) {
            elems = document.querySelectorAll( '.wprm-recipe-ingredient-image' );
        } else if ( 'wprm-print-toggle-recipe-instruction-media' === toggle.id ) {
            elems = document.querySelectorAll( '.wprm-recipe-instruction-media' );
        } else if ( 'wprm-print-toggle-recipe-notes' === toggle.id ) {
            elems = document.querySelectorAll( '.wprm-recipe-notes-container' );
        } else if ( 'wprm-print-toggle-recipe-nutrition' === toggle.id ) {
            elems = document.querySelectorAll( '.wprm-recipe-nutrition-header, .wprm-nutrition-label-container, .wprm-condition-field-nutrition:not(.wprm-condition-inverse)' );
        } else if ( 'wprm-print-toggle-qr' === toggle.id ) {
            elems = document.querySelectorAll( '.wprm-qr-code-container' );
        } else if ( 'wprm-print-toggle-collection-name' === toggle.id ) {
            elems = document.querySelectorAll( '.wprmprc-container-header-container' );
        } else if ( 'wprm-print-toggle-collection-description' === toggle.id ) {
            elems = document.querySelectorAll( '.wprmprc-collection-description' );
        } else if ( 'wprm-print-toggle-collection-images' === toggle.id ) {
            elems = document.querySelectorAll( '.wprmprc-collection-item-image' );
        } else if ( 'wprm-print-toggle-collection-servings' === toggle.id ) {
            elems = document.querySelectorAll( '.wprmprc-collection-item-servings' );
        } else if ( 'wprm-print-toggle-collection-nutrition' === toggle.id ) {
            elems = document.querySelectorAll( '.wprmprc-collection-column-nutrition, .wprmprc-collection-item-nutrition' );
        } else if ( 'wprm-print-toggle-collection-qr' === toggle.id ) {
            elems = document.querySelectorAll( '.wprmprc-collection-item-qr' );
        } else if ( 'wprm-print-toggle-shopping-list-collection' === toggle.id ) {
            elems = document.querySelectorAll( '.wprmprc-shopping-list-collection' );
        } else if ( 'wprm-print-toggle-shopping-list' === toggle.id ) {
            elems = document.querySelectorAll( '.wprmprc-shopping-list-list' );
        } else if ( 'wprm-print-toggle-checked-items' === toggle.id ) {
            elems = document.querySelectorAll( '.wprmprc-shopping-list-list-ingredient-checked' );
        }

        // Toggle display for elems.
        for ( let elem of elems ) {
            if ( toggle.checked ) {
                elem.style.display = '';
            } else {
                elem.style.display = 'none';
            }
        }
    },
    onClickPrint() {
        // Optional set URL to have it display nice in the print footer.
        let currentUrl = false;
        if ( window.hasOwnProperty( 'wprm_print_url' ) && window.wprm_print_url ) {
            currentUrl = window.location.href;
            window.history.replaceState( {}, document.title, window.wprm_print_url );
        }

        // Use setTimeout to prevent print window going blank in Safari.
        setTimeout( () => {
            window.print();
        }, 200 );

        if ( currentUrl ) {
            window.history.replaceState( {}, document.title, currentUrl );
        }
    },
    onClickEmail() {
        window.location = 'mailto:?body=' + window.location;
    },
    onClickPdf() {
        // const printContent = document.getElementById( 'wprm-print-content' );

        // html2canvas( printContent, {
        //     scrollY: -window.scrollY,
        //     imageTimeout: 5000,
        //     useCORS: true,
        // }).then( canvas => {
        //     document.getElementById( 'print-pdf' ).appendChild( canvas );

        //     let img = canvas.toDataURL( 'image/png' );
        //     let pdf = new JsPDF( 'portrait', 'mm' );

        //     pdf.addImage( img, 'JPEG', 5, 5, 200, 287 );
        //     pdf.save( document.title + '.pdf' );

        //     document.getElementById( 'print-pdf' ).innerHTML = '';
        // });
    },
    sizeChanger: false,
    initSizeChanger() {
        if ( this.sizeChanger ) {
            const options = this.sizeChanger.querySelectorAll( '.wprm-print-option' );

            // On click.
            for ( let option of options ) {
                option.addEventListener( 'click', () => {
                    this.setSize( option.dataset.size );
                });
            }
        }
    },
    setSize( size ) {
        if ( ['small', 'normal', 'large'].includes( size ) ) {
            const multiplier = this.getSizeMultiplier( size );

            // Collection print layouts don't use recipe templates.
            const collectionLayouts = document.querySelectorAll( '.wprm-recipe-collections-layout-grid, .wprm-recipe-collections-layout-classic' );
            for ( let content of collectionLayouts ) {
                switch ( size ) {
                    case 'small':
                        content.style.fontSize = '0.8em';
                        break;
                    case 'normal':
                        content.style.fontSize = '';
                        break;
                    case 'large':
                        content.style.fontSize = '1.2em';
                        break;
                }
            }

            // Scale each recipe template root independently so templates with a fixed
            // font-size (like Meadow) still react to the size controls.
            const printRecipes = document.querySelectorAll( '#wprm-print-content .wprm-print-recipe' );
            if ( printRecipes.length ) {
                for ( let printRecipe of printRecipes ) {
                    const template = this.getPrintRecipeTemplateRoot( printRecipe );
                    this.setScaledFontSizeForElement( template, multiplier );
                }
            } else {
                const printContent = document.querySelector( '#wprm-print-content' );
                if ( printContent ) {
                    switch ( size ) {
                        case 'small':
                            printContent.style.fontSize = '0.8em';
                            break;
                        case 'normal':
                            printContent.style.fontSize = '';
                            break;
                        case 'large':
                            printContent.style.fontSize = '1.2em';
                            break;
                    }
                }
            }

            if ( this.sizeChanger ) {
                const options = this.sizeChanger.querySelectorAll( '.wprm-print-option' );
                for ( let option of options ) {
                    option.classList.remove( 'option-active');

                    if ( size === option.dataset.size ) {
                        option.classList.add( 'option-active' );
                    }
                }
            }
        }
    },
    getPrintRecipeTemplateRoot( printRecipe ) {
        if ( ! printRecipe ) {
            return false;
        }

        const templateRoot = printRecipe.querySelector( '[class*="wprm-recipe-template-"]' );
        if ( templateRoot ) {
            return templateRoot;
        }

        return printRecipe.firstElementChild ? printRecipe.firstElementChild : false;
    },
    getSizeMultiplier( size ) {
        switch ( size ) {
            case 'small':
                return 0.8;
            case 'large':
                return 1.2;
            case 'normal':
            default:
                return 1;
        }
    },
    setScaledFontSizeForElement( element, multiplier ) {
        if ( ! element ) {
            return;
        }

        if ( ! element.dataset.hasOwnProperty( 'wprmPrintOriginalInlineFontSize' ) ) {
            const inlineFontSize = element.style.getPropertyValue( 'font-size' );
            element.dataset.wprmPrintOriginalInlineFontSize = '' === inlineFontSize
                ? '__wprm_empty__'
                : inlineFontSize;
        }

        if ( ! element.dataset.hasOwnProperty( 'wprmPrintOriginalComputedFontSize' ) ) {
            const computedFontSize = parseFloat( window.getComputedStyle( element ).fontSize );
            if ( ! isNaN( computedFontSize ) && 0 < computedFontSize ) {
                element.dataset.wprmPrintOriginalComputedFontSize = computedFontSize;
            }
        }

        if ( 1 === multiplier ) {
            if ( '__wprm_empty__' === element.dataset.wprmPrintOriginalInlineFontSize ) {
                element.style.removeProperty( 'font-size' );
            } else {
                element.style.setProperty( 'font-size', element.dataset.wprmPrintOriginalInlineFontSize );
            }
            return;
        }

        const originalFontSize = parseFloat( element.dataset.wprmPrintOriginalComputedFontSize );
        if ( ! isNaN( originalFontSize ) && 0 < originalFontSize ) {
            element.style.fontSize = `${ originalFontSize * multiplier }px`;
        }
    },
    maybeRedirect( url ) {
        if ( url && 0 === Object.keys( this.args ).length ) {
            window.location.replace( url );
        }
    },
};

ready(() => {
	window.WPRMPrint.init();
});

function ready( fn ) {
    if (document.readyState != 'loading'){
        fn();
    } else {
        document.addEventListener('DOMContentLoaded', fn);
    }
}
