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

@Component({
    tag: 'status-bar',
    styleUrl: 'status-bar.css',
    scoped: true,
})
export class StatusBar {
    @Prop() currentPrice: number;
    @Prop() summaryActive: boolean;

    @Event() toggleSummary: EventEmitter;
    toggleStatusBarHandler() {
        this.toggleSummary.emit();
    }

    @Event() progressStepChanged: EventEmitter;
    progressStepChangedHandler() {
        this.progressStepChanged.emit();
    }

    renderContinueButton() {
        const amountToSpend = getConfig().minTotal - this.currentPrice;

        if (amountToSpend > 0) {
            return (
                <button class="">
                    Spend {formatCurrency(amountToSpend)}
                    <span class="d-none d-md-inline-block ">&nbsp;to continue</span>
                </button>
            );
        }
        return (
            <button class="active" onClick={this.progressStepChangedHandler.bind(this)}>
                continue
            </button>
        );
    }

    render() {
        const summaryClass = this.summaryActive ? 'summary-button active' : 'summary-button';

        return (
            <div class="status-bar py-2 py-md-3">
                <div class="container">
                    <div class="wrapper">
                        <div class="row align-items-center gy-3">
                            <div class="col-auto">
                                <button class={summaryClass} onClick={this.toggleStatusBarHandler.bind(this)}>
                                    <span class="d-none d-md-inline-block me-1">Summary</span>
                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="25px" height="25px">
                                        <path d="M7,10L12,15L17,10H7Z" />
                                    </svg>
                                </button>
                            </div>
                            <div class="col-auto col-sm">
                                <div class="price-wrapper">
                                    <div class="price">
                                        <span class="d-none d-sm-inline-block">Total:&nbsp;</span>
                                        <span>{formatCurrency(this.currentPrice)}</span>
                                    </div>
                                    <div class="delivery-info">
                                        Free delivery<span class="d-none d-md-inline-block">&nbsp;included with subscription</span>
                                    </div>
                                </div>
                            </div>
                            <div class="col col-md-5 col-lg-4 col-xl-3">
                                <div class="continue-button-wrapper">{this.renderContinueButton()}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}