/*!
 * Crafted with ❤ by Salla
 */
import { Host, h } from "@stencil/core";
import arrowLeft from "../../assets/svg/arrow-left.svg";
import arrowRight from "../../assets/svg/arrow-right.svg";
export class SallaPriceRange {
    constructor() {
        this.min = 0;
        this.max = 10000;
        this.moreThanLabel = "أكثر من";
        this.lessThanLabel = "أقل من";
        this.toLabel = "الى";
        this.fromLabel = "من";
        this.typing = false;
        this.isMin = false;
        this.isRTL = salla.config.get('theme.is_rtl', true);
        this.filterValues = [];
    }
    connectedCallback() {
        if (this.filtersData && this.filtersData?.price) {
            this.minPrice = this.filtersData.price.min;
            this.maxPrice = this.filtersData.price.max;
        }
        salla.lang.onLoaded(() => {
            this.moreThanLabel = salla.lang.getWithDefault('common.elements.more_than', this.moreThanLabel);
            this.lessThanLabel = salla.lang.getWithDefault('common.elements.less_than', this.lessThanLabel);
            this.toLabel = salla.lang.getWithDefault('common.elements.to', this.toLabel);
            this.fromLabel = salla.lang.getWithDefault('common.elements.from', this.fromLabel);
        });
        //no need to show one option only
        if (this.option.values.length == 1) {
            return;
        }
        //here we may receive too many prices, we will group all inputs to
        if (this.option.values.length <= 5) {
            this.filterValues = this.option.values;
            return;
        }
        const chunkSize = Math.ceil(this.option.values.length / 5);
        for (let i = 0; i < this.option.values.length; i += chunkSize) {
            this.filterValues.push(this.option.values
                .slice(i, i + chunkSize)
                .reduce((final, currentValue) => {
                final.to = currentValue.to;
                final.count += currentValue.count;
                return final;
            }));
            // do whatever
        }
    }
    /**
     * reset the price range inputs
     */
    async reset() {
        //@ts-ignore
        this.minInput.value = null;
        this.maxInput.value = null;
        this.minPrice = null;
        this.maxPrice = null;
    }
    getPriceLabel(filterValue) {
        // @ts-ignore
        if (isNaN(filterValue.from) || filterValue.from < 1) {
            return `${this.lessThanLabel} ${salla.money(filterValue.to)}`;
        }
        // @ts-ignore
        if (isNaN(filterValue.to) || filterValue.to < 1) {
            return `${this.moreThanLabel} ${salla.money(filterValue.from)}`;
        }
        return `${salla.money(filterValue.from)} ${this.toLabel} ${salla.money(filterValue.to)}`;
    }
    minInputValidation(value) {
        if (value && (value > this.max || (this.maxPrice && value > this.maxPrice))) {
            // this.minPrice = this.maxPrice;
            return;
        }
        if (value < this.min) {
            this.minPrice = this.min;
            return;
        }
        if (value) {
            this.minPrice = value;
        }
    }
    maxInputValidation(value) {
        if (value && (value < this.min || (this.minPrice && value < this.minPrice))) {
            // this.maxPrice = this.minPrice;
            return;
        }
        if (value > this.max) {
            this.maxPrice = this.max;
            return;
        }
    }
    async changedEventHandler(event) {
        salla.helpers.inputDigitsOnly(this.minInput);
        salla.helpers.inputDigitsOnly(this.maxInput);
        const minInputValue = this.minPrice ? +this.minPrice * 1 : null;
        const maxInputValue = this.maxPrice ? +this.maxPrice * 1 : null;
        if (!this.maxPrice) {
            this.maxPrice = '';
        }
        if (this.isMin) {
            this.minInputValidation(minInputValue);
        }
        else {
            if (!this.minPrice) {
                this.minPrice = 0;
            }
            this.maxInputValidation(maxInputValue);
        }
        this.isReady && this.changed.emit({
            event: event,
            option: this.option,
            value: { max: this.maxPrice, min: this.minPrice }
        });
    }
    handleMinMaxPrice(event, value) {
        //todo:: cover when from is star
        this.minPrice = value.from;
        this.maxPrice = value.to !== '*' ? value.to : "";
        this.changedEventHandler(event);
    }
    isChecked(filterValue) {
        if (!this.minPrice && !this.maxPrice) {
            return false;
        }
        //1 filterValue.from zero or * and this.minPrice not set or zero
        //2 filterValue.from == this.minPrice
        //@ts-ignore
        let isMinEqual = ((filterValue.from < 1 || filterValue.from == '*') && this.minPrice == 0) || filterValue.from == this.minPrice;
        //1 filterValue.to == "*" or null
        //2 filterValue.to == this.max
        let isMaxEqual = filterValue.to == '*' || !filterValue.to || filterValue.to == this.maxPrice;
        return isMinEqual && isMaxEqual;
    }
    handleMinPrice(event) {
        this.isMin = true;
        const value = event.target.value;
        this.minPrice = value === '' ? 0 : value;
    }
    handleMaxPrice(event) {
        this.isMin = false;
        const value = event.target.value;
        this.maxPrice = value === undefined ? '' : value;
    }
    render() {
        return (h(Host, { key: '343fd7a54f3a7d32c6709019fb168c7a8a1ca5f1' }, this.filterValues.map((filterValue, index) => {
            return h("label", { class: "s-filters-label", htmlFor: `${this.option.key}-${index}`, key: index }, h("input", { id: `${this.option.key}-${index}`, name: "price", type: "radio", checked: this.isChecked(filterValue), class: "s-filters-radio", onChange: e => this.handleMinMaxPrice(e, filterValue) }), h("span", { innerHTML: this.getPriceLabel(filterValue) }));
        }), h("div", { key: '99b72a90eb7c99fd0a061f3ae6fdb7a16f4a6cb5', class: "flex justify-center items-center" }, h("div", { key: '90234fcadbfd931e1ccbd8006f47219196b7d958', class: "relative max-w-xl w-full" }, h("div", { key: 'eb284df7b56929fa0b6b31f029024a48ba0528b5', class: "s-price-range-inputs" }, h("div", { key: '43adbda7a9dd480690a678e0efc7aeed889fb81f', class: "s-price-range-relative" }, h("div", { key: '16277456eb7fc08357ff91daef4af1944e79b762', class: "s-price-range-currency" }, " ", salla.config.currency().symbol), h("input", { key: '9af2548117afe8389b786621d9e26e8f441c9fa6', type: "number", maxlength: "5", ref: el => this.minInput = el, onBlur: (e) => this.handleMinPrice(e), value: this.minPrice, placeholder: this.fromLabel, class: "s-price-range-number-input" })), h("div", { key: '5f5a45e86632b6183e0b85a5c1489d311b72c9b1', class: "s-price-range-gray-text" }, " -"), h("div", { key: '80198c67b69613cd09f0aa03faaf7f162a432478', class: "s-price-range-relative" }, h("div", { key: '5b84faee68142be3f18215b6f916eb1cd245c74c', class: "s-price-range-currency" }, " ", salla.config.currency().symbol), h("input", { key: 'a813df6ce1645b5e3d414a13879f9c4172bb6f4f', type: "number", maxlength: "5", ref: el => this.maxInput = el, onBlur: (e) => this.handleMaxPrice(e), value: this.maxPrice, placeholder: this.toLabel, class: "s-price-range-number-input", "aria-describedby": "price-currency" })), h("salla-button", { key: '34644f25fbd11238f27f3de0343ef5b65d192c16', color: 'gray', shape: 'icon', size: 'small', fill: 'outline', onClick: (event) => this.changedEventHandler(event) }, h("span", { key: '07f5f1d7faad2ad05ea8538076b73b14a8f3137c', innerHTML: this.isRTL ? arrowLeft : arrowRight })))))));
    }
    componentDidLoad() {
        this.isReady = true;
    }
    static get is() { return "salla-price-range"; }
    static get originalStyleUrls() {
        return {
            "$": ["salla-price-range.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["salla-price-range.css"]
        };
    }
    static get properties() {
        return {
            "minPrice": {
                "type": "any",
                "attribute": "min-price",
                "mutable": true,
                "complexType": {
                    "original": "any",
                    "resolved": "any",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Minimum price threshold value"
                },
                "getter": false,
                "setter": false,
                "reflect": false
            },
            "maxPrice": {
                "type": "any",
                "attribute": "max-price",
                "mutable": true,
                "complexType": {
                    "original": "any",
                    "resolved": "any",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Maximum price threshold value"
                },
                "getter": false,
                "setter": false,
                "reflect": false
            },
            "option": {
                "type": "unknown",
                "attribute": "option",
                "mutable": false,
                "complexType": {
                    "original": "Filter",
                    "resolved": "Filter",
                    "references": {
                        "Filter": {
                            "location": "import",
                            "path": "../salla-filters/interfaces",
                            "id": "src/components/salla-filters/interfaces.ts::Filter"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Product price range filter option object instance"
                },
                "getter": false,
                "setter": false
            },
            "filtersData": {
                "type": "any",
                "attribute": "filters-data",
                "mutable": false,
                "complexType": {
                    "original": "any",
                    "resolved": "any",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Currently selected price filter data"
                },
                "getter": false,
                "setter": false,
                "reflect": true
            }
        };
    }
    static get states() {
        return {
            "min": {},
            "max": {},
            "priceOptions": {},
            "moreThanLabel": {},
            "lessThanLabel": {},
            "toLabel": {},
            "fromLabel": {},
            "typing": {},
            "isMin": {},
            "isRTL": {}
        };
    }
    static get events() {
        return [{
                "method": "changed",
                "name": "changed",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Custome event emitted when there is a change in price input."
                },
                "complexType": {
                    "original": "any",
                    "resolved": "any",
                    "references": {}
                }
            }];
    }
    static get methods() {
        return {
            "reset": {
                "complexType": {
                    "signature": "() => Promise<void>",
                    "parameters": [],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        }
                    },
                    "return": "Promise<void>"
                },
                "docs": {
                    "text": "reset the price range inputs",
                    "tags": []
                }
            }
        };
    }
}
