/*!
 * Crafted with ❤ by Salla
 */
'use strict';

var index = require('./index-vstkdqRz.js');
var helpers = require('./helpers-BJ2rnhxz.js');
require('./interfaces-Bh7W0bEU.js');

const sallaOrderEditItemCss = ":host{display:block}";

const SallaOrderEditItem = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
        this.orderItemUpdated = index.createEvent(this, "orderItemUpdated");
        this.orderItemRemoved = index.createEvent(this, "orderItemRemoved");
        this.quantityInput = null;
        this.productOptions = null;
        this.handleQuantityChange = (event) => {
            const detail = event.detail;
            const newQuantity = detail?.quantity ?? parseInt(event.target.value, 10);
            if (isNaN(newQuantity) || newQuantity < 1)
                return;
            if (newQuantity === this.quantity)
                return;
            this.quantity = newQuantity;
            this.emitUpdate(newQuantity);
        };
        this.handleOptionsChange = () => {
            this.emitUpdate(this.quantity);
        };
    }
    componentWillLoad() {
        this.quantity = this.item?.quantity || 1;
    }
    handleItemChange(newItem) {
        const newQuantity = newItem?.quantity || 1;
        if (newQuantity === this.quantity)
            return;
        this.quantity = newQuantity;
        this.quantityInput?.setValue?.(newQuantity, false);
    }
    get hasOptions() {
        return (this.item.product?.options?.length || 0) > 0;
    }
    async getSelectedOptions() {
        return (await this.productOptions?.getSelectedOptionsData?.()) || {};
    }
    async getOptionsData() {
        return (await this.productOptions?.getOptionsData?.()) || this.item.product?.options || [];
    }
    async emitUpdate(quantity) {
        const itemId = this.item?.id;
        if (itemId == null)
            return;
        const detail = { itemId, quantity };
        if (this.hasOptions) {
            detail.options = await this.getSelectedOptions();
            detail.optionDefinitions = await this.getOptionsData();
        }
        this.orderItemUpdated.emit(detail);
    }
    removeItem() {
        const itemId = this.item?.id;
        if (itemId == null)
            return;
        this.orderItemRemoved.emit({ itemId });
    }
    render() {
        if (!this.item)
            return null;
        const product = this.item.product;
        const productName = this.item.name || product?.name || '';
        const imageUrl = product?.image?.url || '';
        const imageAlt = product?.image?.alt || productName;
        const productUrl = product?.url || '#';
        const price = product?.price;
        const maxQuantity = helpers.getOrderEditProductMaxQuantity(product);
        const weightLabel = product?.weight_label;
        const options = this.item.product?.options;
        const optionsInstanceKey = `order-edit-item-${this.item.id}-${product?.id}`;
        const quantityAttrs = { value: this.quantity };
        if (maxQuantity) {
            quantityAttrs.max = maxQuantity;
        }
        return (index.h(index.Host, null, index.h("div", null, index.h("div", { class: "s-order-edit-item-header" }, index.h("div", { class: "s-order-edit-item-media" }, imageUrl && (index.h("a", { href: productUrl }, index.h("img", { src: imageUrl, alt: imageAlt, class: "s-order-edit-item-image" }))), index.h("div", { class: "s-order-edit-item-details" }, index.h("h2", { class: "s-order-edit-item-name" }, index.h("a", { href: productUrl, class: "s-order-edit-item-link" }, productName)), price != null && (index.h("span", { class: "s-order-edit-item-price", innerHTML: salla.money(price) })), weightLabel && (index.h("p", { class: "s-order-edit-item-weight" }, salla.lang.getWithDefault('pages.products.weight', 'الوزن'), " ", weightLabel)))), index.h("salla-button", { type: "button", shape: "icon", size: "small", color: "danger", "aria-label": salla.lang.getWithDefault('common.elements.delete', 'حذف'), onClick: () => this.removeItem() }, index.h("i", { class: "sicon-cancel" }))), index.h("div", { class: "s-order-edit-item-quantity" }, index.h("h3", { class: "s-order-edit-item-quantity-label" }, salla.lang.getWithDefault('common.elements.quantity', 'الكمية')), index.h("div", { class: "s-order-edit-item-quantity-input" }, index.h("salla-quantity-input", { ref: el => (this.quantityInput = el), ...quantityAttrs, onChange: this.handleQuantityChange }))), this.hasOptions && (index.h("form", { class: "s-order-edit-item-options", onSubmit: e => e.preventDefault() }, index.h("salla-product-options", { ref: el => (this.productOptions = el), onChange: this.handleOptionsChange, "product-id": product.id, "unique-key": optionsInstanceKey, options: JSON.stringify(options), key: `${optionsInstanceKey}-options` }))))));
    }
    static get watchers() { return {
        "item": ["handleItemChange"]
    }; }
};
SallaOrderEditItem.style = sallaOrderEditItemCss;

exports.salla_order_edit_item = SallaOrderEditItem;
