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

@Component({
    tag: 'product-card',
    styleUrl: 'product-card.css',
    scoped: true,
})
export class ProductCard {
    @Prop() product: Product;

    @Event() productChanged: EventEmitter<Product>;

    onQuantityChange = (event: CustomEvent) => {
        this.product.quantity = event.detail;
        this.productChanged.emit(this.product);
    };

    renderPremium() {
        if (this.product.isPremium) {
            return (
                <span class="premium">
                    Premium<span class="d-none d-sm-inline-block">&nbsp;cut</span>
                </span>
            );
        }
    }

    render() {
        return (
            <div class="product">
                <div class="row flex-md-column gy-3 flex-grow-1">
                    <div class="col-6 col-md-12">
                        <div class="img-wrapper">
                            <img src={this.product.imgUrl} alt={this.product.name} />
                            {this.renderPremium()}
                        </div>
                    </div>
                    <div class="col-6 col-md-auto flex-grow-1">
                        <div class="product-wrapper">
                            <h5 class="mb-1">{this.product.name}</h5>
                            <div class="product-cost mb-2">{formatCurrency(this.product.price)}</div>
                            <div>{this.product.description}</div>
                            <div class=" quantity-toggle">
                                <quantity-toggle quantity={this.product.quantity} onQuantityChange={this.onQuantityChange.bind(this)}></quantity-toggle>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}