/*!
 * Built by ShiftSoftware
 * Copyright (c)
 */
import { Host, h } from "@stencil/core";
import Eye from "~assets/eye.svg";
import accessoriesSchema from "../../locales/vehicleLookup/accessories/type";
import { VehicleInfoLayout } from "../../features/vehicle-info-layout/index";
import { closeImageViewer, ImageViewer, openImageViewer } from "../../features/image-viewer/index";
import { smartInvokable } from "../../features/blazor-ref/index";
import { setVehicleLookupData, setVehicleLookupErrorState } from "../../features/vehicle-lookup-component/index";
import { getLocaleLanguage, getSharedLocal, sharedLocalesSchema } from "../../features/multi-lingual/index";
export class VehicleAccessories {
    constructor() {
        // #region Localization
        this.language = 'en';
        this.locale = Object.assign({ sharedLocales: sharedLocalesSchema.getDefault() }, accessoriesSchema.getDefault());
        // #endregion
        // #region Vehicle info layout prop
        this.coreOnly = false;
        // #endregion
        // #region Image Viewer Logic
        this.expandedImage = '';
        this.disableVinValidation = false;
        this.headers = {};
        this.queryString = '';
        this.isError = false;
        this.isLoading = false;
    }
    async componentWillLoad() {
        await this.changeLanguage(this.language);
    }
    async changeLanguage(newLanguage) {
        const [sharedLocales, locale] = await Promise.all([getSharedLocal(newLanguage), getLocaleLanguage(newLanguage, 'vehicleLookup.accessories', accessoriesSchema)]);
        this.locale = Object.assign({ sharedLocales }, locale);
    }
    async setBlazorRef(newBlazorRef) {
        this.blazorRef = newBlazorRef;
    }
    async setMockData(newMockData) {
        this.mockData = newMockData;
    }
    async fetchVin(newData, headers = {}) {
        await setVehicleLookupData(this, newData, headers);
    }
    async setErrorMessage(message) {
        setVehicleLookupErrorState(this, message);
    }
    onLoadingChange(newValue) {
        smartInvokable.bind(this)(this.loadingStateChange, newValue);
    }
    // #endregion
    render() {
        var _a, _b, _c;
        const texts = this.locale;
        const accessories = ((_a = this === null || this === void 0 ? void 0 : this.vehicleLookup) === null || _a === void 0 ? void 0 : _a.accessories) ? (_b = this.vehicleLookup) === null || _b === void 0 ? void 0 : _b.accessories : [];
        const tableHeaders = [
            {
                width: 300,
                key: 'partNumber',
                label: texts.partNumber,
            },
            {
                width: 500,
                key: 'description',
                label: texts.description,
            },
            {
                width: 200,
                key: 'image',
                label: texts.image,
            },
        ];
        const rows = accessories === null || accessories === void 0 ? void 0 : accessories.map(accessory => ({
            partNumber: accessory === null || accessory === void 0 ? void 0 : accessory.partNumber,
            description: accessory === null || accessory === void 0 ? void 0 : accessory.description,
            image: () => (h("div", { class: "size-[100px] flex mx-auto items-center justify-center" }, h("button", { onClick: ({ target }) => openImageViewer.bind(this)(target, accessory === null || accessory === void 0 ? void 0 : accessory.image), class: "shrink-0 relative ring-0 outline-none w-fit mx-auto [&_img]:hover:shadow-lg [&_div]:hover:!opacity-100 cursor-pointer" }, h("div", { class: "absolute flex-col justify-center gap-[4px] size-full flex items-center pointer-events-none hover:opacity-100 rounded-lg opacity-0 bg-black/40 transition-all duration-300" }, h("img", { src: Eye }), h("span", { class: "text-white" }, texts.expand)), h("img", { class: "w-auto h-auto max-w-[100px] max-h-[100px] cursor-pointer shadow-sm rounded-lg transition-all duration-300", src: accessory === null || accessory === void 0 ? void 0 : accessory.image })))),
        }));
        const templateRow = {
            image: () => h("div", { key: '0c2f3203b0fae1d0125367926c92d53ebc08a286', class: "size-[100px] flex mx-auto items-center justify-center" }, "\u00A0"),
        };
        return (h(Host, { key: '90287ba16ac6c9736e3718970b8cfa498d953206', translate: "no" }, h(ImageViewer, { key: '5a691a3cea7140e9c5f1e119ec2591dc5f144fd6', closeImageViewer: () => closeImageViewer.bind(this)(), expandedImage: this.expandedImage }), h(VehicleInfoLayout, { key: 'd3ca8f3849855656e3ca433bb949aa984cfeae77', isError: this.isError, isLoading: this.isLoading, coreOnly: this.coreOnly, header: (_c = this.vehicleLookup) === null || _c === void 0 ? void 0 : _c.vin, direction: this.locale.sharedLocales.direction, errorMessage: this.locale.sharedLocales.errors[this.errorMessage] || this.locale.sharedLocales.errors.wildCard }, h("div", { key: 'e09163f2c129640bec944a1dd74fa2d3637dd880', class: "overflow-x-auto" }, h("information-table", { key: '42ca438b0feeb26dfb5c9ce2b5178837efac9904', templateRow: templateRow, rows: rows, headers: tableHeaders, isLoading: this.isLoading })))));
    }
    static get is() { return "vehicle-accessories"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["vehicle-accessories.css"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["vehicle-accessories.css"]
        };
    }
    static get properties() {
        return {
            "language": {
                "type": "string",
                "attribute": "language",
                "mutable": false,
                "complexType": {
                    "original": "LanguageKeys",
                    "resolved": "\"ar\" | \"en\" | \"ku\" | \"ru\"",
                    "references": {
                        "LanguageKeys": {
                            "location": "import",
                            "path": "~features/multi-lingual",
                            "id": "src/features/multi-lingual/index.ts::LanguageKeys"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "'en'"
            },
            "coreOnly": {
                "type": "boolean",
                "attribute": "core-only",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "false"
            },
            "isDev": {
                "type": "boolean",
                "attribute": "is-dev",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false
            },
            "disableVinValidation": {
                "type": "boolean",
                "attribute": "disable-vin-validation",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "false"
            },
            "baseUrl": {
                "type": "string",
                "attribute": "base-url",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false
            },
            "headers": {
                "type": "unknown",
                "attribute": "headers",
                "mutable": false,
                "complexType": {
                    "original": "object",
                    "resolved": "object",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "defaultValue": "{}"
            },
            "queryString": {
                "type": "string",
                "attribute": "query-string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "''"
            },
            "errorCallback": {
                "type": "string",
                "attribute": "error-callback",
                "mutable": false,
                "complexType": {
                    "original": "BlazorInvokableFunction<(errorMessage: ErrorKeys) => void>",
                    "resolved": "((errorMessage: OptionalKeys<{ noBaseUrl: string; invalidVin: string; vinNumberRequired: string; partNumberRequired: string; wrongResponseFormat: string; noPartsFound: string; noServiceAvailable: string; wrongFormStructure: string; wildCard: string; requestFailedPleaseTryAgainLater: string; }>) => void) | string",
                    "references": {
                        "BlazorInvokableFunction": {
                            "location": "import",
                            "path": "~features/blazor-ref",
                            "id": "src/features/blazor-ref/index.ts::BlazorInvokableFunction"
                        },
                        "ErrorKeys": {
                            "location": "import",
                            "path": "~features/multi-lingual",
                            "id": "src/features/multi-lingual/index.ts::ErrorKeys"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false
            },
            "loadingStateChange": {
                "type": "string",
                "attribute": "loading-state-change",
                "mutable": false,
                "complexType": {
                    "original": "BlazorInvokableFunction<(isLoading: boolean) => void>",
                    "resolved": "((isLoading: boolean) => void) | string",
                    "references": {
                        "BlazorInvokableFunction": {
                            "location": "import",
                            "path": "~features/blazor-ref",
                            "id": "src/features/blazor-ref/index.ts::BlazorInvokableFunction"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false
            },
            "loadedResponse": {
                "type": "string",
                "attribute": "loaded-response",
                "mutable": false,
                "complexType": {
                    "original": "BlazorInvokableFunction<(response: VehicleLookupDTO) => void>",
                    "resolved": "((response: VehicleLookupDTO) => void) | string",
                    "references": {
                        "BlazorInvokableFunction": {
                            "location": "import",
                            "path": "~features/blazor-ref",
                            "id": "src/features/blazor-ref/index.ts::BlazorInvokableFunction"
                        },
                        "VehicleLookupDTO": {
                            "location": "import",
                            "path": "~types/generated/vehicle-lookup/vehicle-lookup-dto",
                            "id": "src/global/types/generated/vehicle-lookup/vehicle-lookup-dto.ts::VehicleLookupDTO"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false
            }
        };
    }
    static get states() {
        return {
            "locale": {},
            "expandedImage": {},
            "blazorRef": {},
            "isError": {},
            "errorMessage": {},
            "isLoading": {},
            "vehicleLookup": {}
        };
    }
    static get methods() {
        return {
            "setBlazorRef": {
                "complexType": {
                    "signature": "(newBlazorRef: DotNetObjectReference) => Promise<void>",
                    "parameters": [{
                            "name": "newBlazorRef",
                            "type": "{ invokeMethodAsync: (methodName: string, ...args: any[]) => Promise<any>; }",
                            "docs": ""
                        }],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        },
                        "DotNetObjectReference": {
                            "location": "import",
                            "path": "~features/blazor-ref",
                            "id": "src/features/blazor-ref/index.ts::DotNetObjectReference"
                        }
                    },
                    "return": "Promise<void>"
                },
                "docs": {
                    "text": "",
                    "tags": []
                }
            },
            "setMockData": {
                "complexType": {
                    "signature": "(newMockData: VehicleLookupMock) => Promise<void>",
                    "parameters": [{
                            "name": "newMockData",
                            "type": "{ [key: string]: VehicleLookupDTO; }",
                            "docs": ""
                        }],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        },
                        "VehicleLookupMock": {
                            "location": "import",
                            "path": "~features/vehicle-lookup-component",
                            "id": "src/features/vehicle-lookup-component/index.ts::VehicleLookupMock"
                        }
                    },
                    "return": "Promise<void>"
                },
                "docs": {
                    "text": "",
                    "tags": []
                }
            },
            "fetchVin": {
                "complexType": {
                    "signature": "(newData: VehicleLookupDTO | string, headers?: any) => Promise<void>",
                    "parameters": [{
                            "name": "newData",
                            "type": "string | VehicleLookupDTO",
                            "docs": ""
                        }, {
                            "name": "headers",
                            "type": "any",
                            "docs": ""
                        }],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        },
                        "VehicleLookupDTO": {
                            "location": "import",
                            "path": "~types/generated/vehicle-lookup/vehicle-lookup-dto",
                            "id": "src/global/types/generated/vehicle-lookup/vehicle-lookup-dto.ts::VehicleLookupDTO"
                        }
                    },
                    "return": "Promise<void>"
                },
                "docs": {
                    "text": "",
                    "tags": []
                }
            },
            "setErrorMessage": {
                "complexType": {
                    "signature": "(message: ErrorKeys) => Promise<void>",
                    "parameters": [{
                            "name": "message",
                            "type": "\"noBaseUrl\" | \"invalidVin\" | \"vinNumberRequired\" | \"partNumberRequired\" | \"wrongResponseFormat\" | \"noPartsFound\" | \"noServiceAvailable\" | \"wrongFormStructure\" | \"wildCard\" | \"requestFailedPleaseTryAgainLater\"",
                            "docs": ""
                        }],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        },
                        "ErrorKeys": {
                            "location": "import",
                            "path": "~features/multi-lingual",
                            "id": "src/features/multi-lingual/index.ts::ErrorKeys"
                        }
                    },
                    "return": "Promise<void>"
                },
                "docs": {
                    "text": "",
                    "tags": []
                }
            }
        };
    }
    static get elementRef() { return "el"; }
    static get watchers() {
        return [{
                "propName": "language",
                "methodName": "changeLanguage"
            }, {
                "propName": "isLoading",
                "methodName": "onLoadingChange"
            }];
    }
}
