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

@Component({
    tag: 'progress-basket',
    styleUrl: 'progress-basket.css',
    scoped: true,
})
export class ProgressBasket {
    @Prop() products!: Product[];
    @Prop() total!: number;
    @Prop() frequency!: number;

    @Event() progressStepChanged: EventEmitter<string>;

    @State() validOrder: boolean = true;
    @Element() el: HTMLInputElement;

    @Watch('total')
    checkValidOrder() {
        this.validOrder = this.total >= getConfig().minTotal;
    }

    getRemainingSpend() {
        return formatCurrency(getConfig().minTotal - this.total);
    }

    getProducts() {
        if (this.products.length == 0) {
            return (
                <div class="no-products">
                    No products added -
                    <button class="btn-text" onClick={() => this.progressStepChanged.emit('products')}>
                        go back
                    </button>
                </div>
            );
        }
        return (
            <Fragment>
                {this.products.map(p => (
                    <div class="mb-3">
                        <product-line product={p}></product-line>
                    </div>
                ))}
                <button class="btn-text px-0" onClick={() => this.progressStepChanged.emit('products')}>
                    Edit products
                </button>
            </Fragment>
        );
    }

    getFrequency() {
        var button;

        if (this.validOrder) {
            button = (
                <button class="btn-text" onClick={() => this.progressStepChanged.emit('frequency')}>
                    Edit
                </button>
            );
        }

        return (
            <div class="frequency">
                Every {this.frequency} weeks {button}
            </div>
        );
    }

    render() {
        var proceed: any[];
        if (!this.validOrder) {
            proceed = [
                <div class="min-spend">
                    Spend {this.getRemainingSpend()} more to continue
                    <button class="btn-text" onClick={() => this.progressStepChanged.emit('products')}>
                        Go back
                    </button>
                </div>,
            ];
        }

        const cards = ['visa', 'mastercard', 'amex', 'paypal', 'klarna', 'apple-pay', 'google-pay'];

        this.el.style.setProperty('--background-img', 'url(' + resolveAsset('/assets/payment-bg.jpg') + ')');

        return (
            <div class="bg">
                <div class="container">
                    <div class="wrapper">
                        <a class="back-link" href="#" onClick={() => this.progressStepChanged.emit('frequency')}>
                            &lt; Back
                        </a>
                        <div class="content-wrapper">
                            <h5 class="mb-4">Your basket</h5>
                            <div class="products-wrapper">{this.getProducts()}</div>
                            <div class="payment-wrapper">
                                <div class="row gy-4 justify-content-between">
                                    <div class="col-md-5 col-lg-4 total-wrapper ">
                                        <div class="title">Total</div>
                                        <div class="total">{formatCurrency(this.total)}</div>
                                        {this.getFrequency()}
                                    </div>
                                    <div class="col-md-6">
                                        <div class="proceed-wrapper">
                                            <div class="title mb-1">FREE UK Mainland Delivery</div>
                                            <div class="sub-heading mb-4">If you have a discount code you can apply it after clicking Secure Checkout.</div>
                                            <button class="secure-checkout-button" disabled={!this.validOrder}>
                                                <img class="me-3" src={resolveAsset('/assets/icon/feather-lock.svg')} alt="Secure Checkout" /> Secure Checkout
                                            </button>
                                            {proceed}
                                            <div class="row gy-2 gx-1 mt-2">
                                                {cards.map(card => (
                                                    <div class="col-auto">
                                                        <img class="payment-card" src={resolveAsset('/assets/cards/' + card + '.png')} alt={card.replace('-', ' ')} />
                                                    </div>
                                                ))}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}