import { Component, Prop, Watch, Event, EventEmitter, h } from '@stencil/core';
import { Product } from '../../classes/product';

@Component({
    tag: 'order-summary',
    styleUrl: 'order-summary.css',
    scoped: true,
})
export class OrderSummary {
    @Prop() products: Product[];

    @Event() toggleSummary: EventEmitter;
    toggleStatusBarHandler() {
        this.toggleSummary.emit();
    }
    @Watch('products')
    formatProducts() {
        const activeProducts = this.products.filter(x => x.quantity > 0);

        if (activeProducts.length == 0) {
            return <div class="no-products">No products added</div>;
        }
        return (
            <div class="products-wrapper">
                {activeProducts.map(p => (
                    <div class="mb-3">
                        <product-line product={p}></product-line>
                    </div>
                ))}
            </div>
        );
    }

    render() {
        return (
            <div>
                <div class="overlay" onClick={this.toggleStatusBarHandler.bind(this)}></div>
                <div class="container">
                    <div class="wrapper">
                        <div class="title">
                            Order <span>Summary</span>
                        </div>
                        <button class="close" onClick={this.toggleStatusBarHandler.bind(this)}>
                            <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>
                        {this.formatProducts()}
                    </div>
                </div>
            </div>
        );
    }
}