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

@Component({
    tag: 'quantity-toggle',
    styleUrl: 'quantity-toggle.css',
    scoped: true,
})
export class QuantityToggle {
    @Prop({ mutable: true }) quantity: number = 0;
    @Prop() confirmDelete: boolean = false;
    @Event() quantityChange: EventEmitter<number>;
    @Element() el: HTMLElement;
    removeEl: HTMLElement;

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

    onIncrement() {
        if (this.quantity == getConfig().maxQuantity) {
            return;
        }

        this.quantity++;
        this.quantityChange.emit(this.quantity);
    }

    incrementClassName() {
        const prefix = 'increment';

        if (this.quantity == getConfig().maxQuantity) {
            return prefix + ' max';
        }

        return prefix;
    }

    generateDecrementButton() {
        if (this.quantity > 0) {
            var btn;

            if (this.confirmDelete && this.quantity == 1) {
                btn = (
                    <fragment>
                        <tooltip-confirm-delete onConfirmDelete={() => this.quantityChange.emit(0)}></tooltip-confirm-delete>
                        <button class="decrement confirm-delete" ref={el => (this.removeEl = el as HTMLElement)} onClick={this.requestDelete.bind(this)}>
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                                <path d="M9,3V4H4V6H5V19A2,2 0 0,0 7,21H17A2,2 0 0,0 19,19V6H20V4H15V3H9M7,6H17V19H7V6M9,8V17H11V8H9M13,8V17H15V8H13Z" />
                            </svg>
                        </button>
                    </fragment>
                );
            } else {
                btn = (
                    <button class="decrement" onClick={this.onDecrement.bind(this)}>
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                            <path d="M20 14H4V10H20" />
                        </svg>
                    </button>
                );
            }
            return (
                <span>
                    {btn}
                    <span class="quantity">{this.quantity}</span>
                </span>
            );
        }
    }

    getWrapperClass() {
        return this.confirmDelete ? 'wrapper wrapper-minimised' : 'wrapper';
    }
    render() {
        return (
            <div class={this.getWrapperClass()}>
                {this.generateDecrementButton()}
                <button class={this.incrementClassName()} onClick={this.onIncrement.bind(this)}>
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                        <path d="M20 14H14V20H10V14H4V10H10V4H14V10H20V14Z" />
                    </svg>
                </button>
            </div>
        );
    }
}