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

@Component({
    tag: 'progress-frequency',
    styleUrl: 'progress-frequency.css',
    scoped: true,
})
export class ProgressFrequency {
    @Prop() frequency: number;
    @Element() el: HTMLElement;

    @Event() progressStepChanged: EventEmitter<string>;

    @Event() frequencyUpdate: EventEmitter;
    frequencyUpdateHandler(event) {
        this.frequencyUpdate.emit(event.target.value);
    }

    meatUrl = resolveAsset('/assets/meat-selection.jpg');
    render() {
        this.el.style.setProperty('--checkbox-img', 'url(' + resolveAsset('/assets/icon/check-bold.svg') + ')');

        return (
            <div class="bg">
                <div class="container mb-2">
                    <div class="wrapper">
                        <a class="back-link" href="#" onClick={() => this.progressStepChanged.emit('products')}>
                            &lt; Back
                        </a>
                        <div class="content-wrapper">
                            <div class="row gy-4">
                                <div class="col-md-6">
                                    <h5>Choose your plan</h5>
                                    <div class="mb-4">Customise your plan to suit your needs. You can change your preferences at any time, with no extra cost!</div>
                                    <ul class="mb-5 ">
                                        <li>Free cancellation</li>
                                        <li>Flexible plan</li>
                                        <li>Choose what you want</li>
                                    </ul>
                                    <label>Select Frequency</label>
                                    <select onInput={this.frequencyUpdateHandler.bind(this)} id="frequency-select">
                                        <option selected={this.frequency == 4} value="4">
                                            Every 4 Weeks
                                        </option>
                                        <option selected={this.frequency == 6} value="6">
                                            Every 6 Weeks
                                        </option>
                                        <option selected={this.frequency == 8} value="8">
                                            Every 8 Weeks
                                        </option>
                                    </select>
                                </div>
                                <div class="col-md-6">
                                    <img src={this.meatUrl} alt="" />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="img-wrapper">
                    <img class="img" src={resolveAsset('/assets/frequency-bg.jpg')} alt="" />
                </div>
            </div>
        );
    }
}