import { Component, Fragment, Listen, Event, Element, EventEmitter, h } from '@stencil/core';
import { resolveAsset } from '../../classes/helpers';

@Component({
    tag: 'side-bar',
    styleUrl: 'side-bar.css',
    scoped: true,
})
export class SideBar {
    sideBarEl!: HTMLInputElement;
    backdropEl!: HTMLInputElement;

    @Element() el: HTMLInputElement;

    @Listen('toggleBurgerMenu', { target: 'body' })
    toggleBurgerMenuHandler() {
        this.sideBarEl.classList.toggle('active');
        this.backdropEl.classList.toggle('show');
    }

    @Event() progressStepChanged: EventEmitter<string>;

    render() {
        const logoSrc = resolveAsset('/assets/club-logo.svg');
        const icon1 = resolveAsset('/assets/icon/icon-1.png');
        const icon2 = resolveAsset('/assets/icon/icon-2.png');
        const icon3 = resolveAsset('/assets/icon/icon-3.png');
        const icon4 = resolveAsset('/assets/icon/icon-4.png');
        const partnerLogos = resolveAsset('/assets/partner-logos.png');

        this.el.style.setProperty('--background-img', 'url(' + resolveAsset('/assets/paper-bg-min.png') + ')');

        return (
            <Fragment>
                <aside ref={el => (this.sideBarEl = el as HTMLInputElement)} style={{ 'font-size': 'url("assets/hello/png")' }}>
                    <div class="content-wrapper">
                        <button class="close-button" onClick={() => this.toggleBurgerMenuHandler()}>
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                                <path d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z" />
                            </svg>
                        </button>

                        <div class="logo-wrapper">
                            <img class="logo" src={logoSrc} onClick={() => this.progressStepChanged.emit('home')} />
                        </div>

                        <h1>Charcuterie Subscription</h1>
                        <p class="intro">Our first steps into a subscription service for your cured meats needs with a variety of perks to peak your interest!</p>
                        <div class="benefits">
                            <div class="benefit">
                                <img src={icon1} alt="Cobble lane club benefit" />
                                <p>Exclusive products & offers</p>
                            </div>
                            <div class="benefit">
                                <img src={icon2} alt="Cobble lane club benefit" />
                                <p>Free gifts and merch</p>
                            </div>
                            <div class="benefit">
                                <img src={icon3} alt="Cobble lane club benefit" />
                                <p>Save money and time</p>
                            </div>
                            <div class="benefit">
                                <img src={icon4} alt="Cobble lane club benefit" />
                                <p>Be part of the Cobble community</p>
                            </div>
                        </div>
                        <div class="pt-3 mt-auto footer">
                            <div class="logos">
                                <img class="partner-logos" src={partnerLogos} alt="Cobble Logo" />
                            </div>
                            <div class="mb-2">Lovingly prepared by Cobble Lane Cured.</div>
                            <div class="london">Made in London</div>
                        </div>
                    </div>
                </aside>
                <div class="backdrop" onClick={() => this.toggleBurgerMenuHandler()} ref={el => (this.backdropEl = el as HTMLInputElement)}></div>
            </Fragment>
        );
    }
}