import {formateaMoneda, isNumber} from '../utils.js';

class ServiceOptionCard {

    constructor({ id, title, description = '', price = '', priceUnit = '', checked = false, allowChange = true, ribbonText }) {
        this.id = id;
        this.title = title;
        this.description = description ? description : '&nbsp;';
        this.price = price;
        this.priceUnit = priceUnit;
        this.checked = checked;
        this.allowChange = !(String(allowChange).toLowerCase() === "false");
        this.ribbonText = ribbonText;
    }


    render() {
        const ribbonHtml = this.ribbonText
            ? `<div class="ribbon-service"><span>${this.ribbonText}</span></div>`
            : '';
        const $card = $(`
            <div class="col-lg-2 col-md-3 col-sm-6 mb-3">
                <input type="checkbox" class="service-checkbox btn-check-service" data-price=${this.price} id="${this.id}" name="services[]" value="${this.id}" autocomplete="off" ${this.checked ? 'checked' : ''} />
                <label class="btn btn-service-option w-100 text-center py-3 px-2 d-flex flex-column align-items-center justify-content-center h-100" for="${this.id}">
                    ${ribbonHtml}
                    <h5 class="service-title mb-1">${this.title}</h5>
                    <p class="service-desc mb-1 small">${this.description}</p>
                    <h4 class="service-price fw-semibold mt-2 h4 mb-0">${isNumber(this.price) ? formateaMoneda(this.price, 2, this.locale) : this.price}</h4>
                </label>
            </div>
        `);

        const $checkbox = $card.find('input[type="checkbox"]');

        if (!this.allowChange) {
            // Deshabilita el cambio de estado visual
            $checkbox.on('click', (e) => {
                e.preventDefault();
                e.stopImmediatePropagation();
                return false;
            });
        }

        return $card;
    }
}

export default ServiceOptionCard;