import { Component, h } from '@stencil/core';
import { resolveAsset } from '../../classes/helpers';

@Component({
    tag: 'app-root',
    styleUrl: 'app-root.css',
    scoped: true,
})
export class AppRoot {
    componentDidLoad() {
        const appHeight = () => {
            const doc = document.documentElement;
            doc.style.setProperty('--app-height', `${window.innerHeight}px`);
        };

        window.addEventListener('resize', appHeight);
        appHeight();
        this.preLoadImages();
    }

    preLoadImages() {
        // pre-fetch all background images
        let images = [];
        let backgrounds = ['/assets/product-bg.jpg', '/assets/frequency-bg.jpg', '/assets/payment-bg.jpg', '/assets/basket-bg.jpg'];
        let boxes = ['/assets/boxes/regular-box.png', '/assets/boxes/large-box.png'];
        let other = ['/assets/meat-selection.jpg'];

        images = images.concat(backgrounds, boxes, other);

        images.forEach(img => {
            let image = new Image();
            image.src = resolveAsset(img);
        });
    }

    render() {
        return (
            <div>
                <main>
                    <app-home></app-home>
                </main>
            </div>
        );
    }
}