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

@Component({
    tag: 'product-line',
    styleUrl: 'product-line.css',
    scoped: true,
})
export class ProductLine {
    @Prop() product!: Product;
    @Element() el: HTMLElement;

    removeEl: HTMLElement;

    @Event() productChanged: EventEmitter<Product>;
    removeProductHandler() {
        var updatedProduct = this.product;
        updatedProduct.quantity = 0;
        this.productChanged.emit(updatedProduct);
    }

    updateProductQuantityHandler(event) {
        // else, update the quantity
        var updatedProduct = this.product;
        updatedProduct.quantity = event.detail;
        this.productChanged.emit(updatedProduct);
    }

    requestDelete() {
        (async () => {
            await customElements.whenDefined('tooltip-confirm-delete');
            const todoListElement = this.el.querySelector('tooltip-confirm-delete');
            await todoListElement.init(this.removeEl);
        })();
    }

    render() {
        var remove = (
            <fragment>
                <tooltip-confirm-delete onConfirmDelete={() => this.removeProductHandler()}></tooltip-confirm-delete>
                <button class="remove" ref={removeEl => (this.removeEl = removeEl as HTMLElement)} onClick={this.requestDelete.bind(this)}>
                    <span class="d-none d-md-block">Remove</span>
                </button>
            </fragment>
        );

        return (
            <div class="wrapper">
                <div class="row gx-0">
                    <div class="col-4 col-sm-3 col-md-auto ">
                        <img class="py-2 ps-2" src={this.product.imgUrl} alt="" />
                    </div>
                    <div class="col-8 col-sm-9 col-md-10 col-lg d-flex flex-grow-1">
                        <div class="px-3 py-2 py-md-0 d-flex flex-grow-1">
                            <div class="row flex-grow-1 gy-2">
                                <div class="col-md-5 mb-md-0 flex-grow-1 d-flex flex-column justify-content-md-center">
                                    <div class="product-name"> {this.product.name}</div>
                                    <p class="product-cost">{formatCurrency(this.product.price)} each</p>
                                </div>
                                <div class="col-auto col-sm-6 col-md-3 d-flex align-items-end align-items-md-center justify-content-md-center border-left">
                                    <quantity-toggle quantity={this.product.quantity} confirmDelete={true} onQuantityChange={this.updateProductQuantityHandler.bind(this)}></quantity-toggle>
                                </div>
                                <div class="col col-sm-6 col-md-2 d-flex align-items-end align-items-md-center justify-content-end justify-content-md-center border-left">
                                    <div class="product-price"> {formatCurrency(this.product.price * this.product.quantity)}</div>
                                </div>
                                <div class="remove-wrapper col-auto align-items-center justify-content-end border-left">
                                    <div class="remove">{remove}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}