import { h } from "@stencil/core";
import { debounce } from "lodash";
import { ICheckoutPaymentModeParam, ICheckoutStatus } from "../../api";
import { filterParams, propsParams, clearParams } from "./checkouts-list-params-state";
import { StyledHost } from "../../ui-components";
import { convertToLocal, convertToUTC } from "../../utils/utils";
import { filterMenu, filterParam } from "../../styles/parts";
export class JustifiCheckoutsListFilters {
    constructor() {
        this.setParamsOnChange = (name, value) => {
            filterParams[name] = value;
        };
        this.handleDateInput = (name, value) => {
            const utcDate = convertToUTC(value, { setExactTime: true });
            this.setParamsOnChange(name, utcDate);
        };
    }
    componentWillLoad() {
        // debounced input handler for text input
        this.debouncedSetParamsOnChange = debounce(this.setParamsOnChange, 300);
        const propsToSet = {
            status: this.checkoutStatus,
            payment_mode: this.paymentMode,
            checkout_id: this.checkoutId,
            successful_payment_id: this.successfulPaymentId,
            created_after: this.createdAfter,
            created_before: this.createdBefore
        };
        Object.entries(propsToSet).forEach(([key, value]) => {
            if (value) {
                propsParams[key] = value;
            }
        });
    }
    get checkoutStatusOptions() {
        return [
            { label: 'All', value: '' },
            { label: 'Created', value: ICheckoutStatus.created },
            { label: 'Completed', value: ICheckoutStatus.completed },
            { label: 'Attempted', value: ICheckoutStatus.attempted },
            { label: 'Expired', value: ICheckoutStatus.expired },
        ];
    }
    get checkoutPaymentModeOptions() {
        return [
            { label: 'All', value: '' },
            { label: 'E-commerce', value: ICheckoutPaymentModeParam.ecom },
            { label: 'BNPL', value: ICheckoutPaymentModeParam.bnpl },
            { label: 'Apple Pay', value: ICheckoutPaymentModeParam.apple_pay },
        ];
    }
    render() {
        const filterMenuParams = Object.assign({}, filterParams);
        return (h(StyledHost, { key: '1c4b39ee0103e6905affa774f202dd76f147bc89' }, h("table-filters-menu", { key: '9cb0457d0e6ce05925f4e0da04532008020dd46e', params: filterMenuParams, clearParams: clearParams, part: filterMenu }, h("div", { key: 'e5c370717e3cf2571f2017d185c7f3ea08eab1c8', class: "grid-cols-2 gap-3 p-1" }, h("div", { key: '2e3c1832bb800fa9065b189a299234fafa7eb4e3', class: "p-2" }, h("form-control-text", { key: '33e1e31d842aa0b8c47e3ea1bc12cc860691f5e3', name: "checkout_id", label: "Checkout ID", inputHandler: this.debouncedSetParamsOnChange, defaultValue: this.checkoutId || filterParams.checkout_id, disabled: !!this.checkoutId, part: filterParam })), h("div", { key: '4dcfe2f56d8405f376eb4aa52deaea0fb64e8ff5', class: "p-2" }, h("form-control-text", { key: '272ba42827048aa45ada6090eaf9574950ebaca2', name: "successful_payment_id", label: "Successful Payment ID", inputHandler: this.debouncedSetParamsOnChange, defaultValue: this.successfulPaymentId || filterParams.successful_payment_id, disabled: !!this.successfulPaymentId, part: filterParam })), h("div", { key: '7c4e0ad12e0031a70aeaec5a0423d9b0b45c70a4', class: "p-2" }, h("form-control-select", { key: '87775c3a0d1de63301dde682f79a7c2c11a4958b', name: "status", label: "Status", options: this.checkoutStatusOptions, inputHandler: this.setParamsOnChange, defaultValue: this.checkoutStatus || filterParams.status || '', disabled: !!this.checkoutStatus, part: filterParam })), h("div", { key: 'e751b51d9e2725addd6e9b082bf326fc039b0a7a', class: "p-2" }, h("form-control-select", { key: '642fc1af53bc89d1604a864f4088781096cd24a2', name: "payment_mode", label: "Payment Mode", options: this.checkoutPaymentModeOptions, inputHandler: this.setParamsOnChange, defaultValue: this.paymentMode || filterParams.payment_mode || '', disabled: !!this.paymentMode, part: filterParam })), h("div", { key: 'a95638261e002677c51299342d34bafc8a8615b4', class: "p-2" }, h("form-control-date", { key: 'ca017b89e5ae0ea3f4d55ade8de2acbdc2062c86', name: "created_after", label: "Created After", inputHandler: this.handleDateInput, defaultValue: convertToLocal(this.createdAfter, { showInputDateTime: true }) ||
                convertToLocal(filterParams.created_after, { showInputDateTime: true }), showTime: true, disabled: !!this.createdAfter, part: filterParam })), h("div", { key: '0585dff7f655db9da4f3c2124eac6c90b74dbe3b', class: "p-2" }, h("form-control-date", { key: '50fee01232661f33c1996549cf6523c92dc937c4', name: "created_before", label: "Created Before", inputHandler: this.handleDateInput, defaultValue: convertToLocal(this.createdBefore, { showInputDateTime: true }) ||
                convertToLocal(filterParams.created_before, { showInputDateTime: true }), showTime: true, disabled: !!this.createdBefore, part: filterParam }))))));
    }
    static get is() { return "justifi-checkouts-list-filters"; }
    static get encapsulation() { return "shadow"; }
    static get properties() {
        return {
            "checkoutStatus": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "ICheckoutStatus",
                    "resolved": "ICheckoutStatus.attempted | ICheckoutStatus.completed | ICheckoutStatus.created | ICheckoutStatus.expired",
                    "references": {
                        "ICheckoutStatus": {
                            "location": "import",
                            "path": "../../api",
                            "id": "src/api/index.ts::ICheckoutStatus"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "checkout-status"
            },
            "paymentMode": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "ICheckoutPaymentModeParam",
                    "resolved": "ICheckoutPaymentModeParam.apple_pay | ICheckoutPaymentModeParam.bnpl | ICheckoutPaymentModeParam.ecom",
                    "references": {
                        "ICheckoutPaymentModeParam": {
                            "location": "import",
                            "path": "../../api",
                            "id": "src/api/index.ts::ICheckoutPaymentModeParam"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "payment-mode"
            },
            "checkoutId": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "checkout-id"
            },
            "successfulPaymentId": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "successful-payment-id"
            },
            "createdAfter": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "created-after"
            },
            "createdBefore": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "created-before"
            }
        };
    }
}
