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

@Component({
    tag: 'progress-box',
    styleUrl: 'progress-box.css',
    scoped: true,
})
export class ProgressBox {
    boxes = this.getBoxes();

    @Event() boxChanged: EventEmitter<BundleBox>;
    @Event() progressStepChanged: EventEmitter<string>;

    getBoxes() {
        var boxes = [];

        boxes.push({
            name: 'Regular box',
            imageUrl: resolveAsset('/assets/boxes/regular-box.png'),
            suitableFor: ['2 adults', '1 adult and leftovers', '1 adult and 1 or 2 children'],
        } as BundleBox);

        boxes.push({
            name: 'Large box',
            imageUrl: resolveAsset('/assets/boxes/large-box.png'),
            suitableFor: ['4 adults', '2 or 3 adults and leftovers', '2 adults and 2 or 3 children'],
        } as BundleBox);

        return boxes;
    }

    render() {
        return (
            <div class="container">
                <div class="box-wrapper">
                    <a class="back-link" href="#" onClick={() => this.progressStepChanged.emit('home')}>
                        &lt; Back
                    </a>
                    <div class="row justify-content-center gy-4 ">
                        {this.boxes.map(box => (
                            <div class="col-lg-6 ">
                                <div class="box">
                                    <div class="heading">{box.name}</div>
                                    <div class="img-wrapper">
                                        <img src={box.imageUrl} alt={box.name} />
                                    </div>
                                    <div class="row mt-auto gy-4 align-items-end">
                                        <div class="col-xxl-6">
                                            <div class="suitable">
                                                <h5 class="title">Suitable for</h5>
                                                <ul>
                                                    {box.suitableFor.map(el => (
                                                        <li>{el}</li>
                                                    ))}
                                                </ul>
                                            </div>
                                        </div>
                                        <div class="col-xxl-6">
                                            <button type="button" onClick={() => this.boxChanged.emit(box)}>
                                                Choose {box.name}
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        ))}
                    </div>
                </div>
            </div>
        );
    }
}