import { buildClassList, generateId } from "@boldpenguin/sdk-utility";
import { h } from "@stencil/core";
export class BpSdkVehiclePanel {
    constructor() {
        this.onClick = () => {
            if (this.isExpanded) {
                this.handleClose();
            }
            else {
                this.handleOpen();
            }
        };
        this.code = undefined;
        this.answers = [];
        this.questionGroup = undefined;
        this.canEdit = false;
        this.isEditing = false;
        this.isExpanded = true;
        this.canDelete = false;
        this.canSave = true;
        this.handleClose = undefined;
        this.handleOpen = undefined;
        this.handleDelete = undefined;
        this.handleEdit = undefined;
        this.isValid = true;
        this.vehicleInformation = { year: '', make: '', model: '', configuration: '' };
        this.vehicleLabel = 'Add new vehicle';
        this.shouldShowTrailers = false;
        this.isVehicleTrailer = false;
        this.useExternal = false;
        this.icon = '';
        this.labelledBy = undefined;
        this.ids = {
            year: generateId(8),
            make: generateId(8),
            model: generateId(8),
            slot: generateId(8),
        };
    }
    onIsValidChange(isValid) {
        this.icon = isValid ? 'check_circle' : 'error_outline';
    }
    resetState() { }
    connectedCallback() {
        this.resetState();
    }
    componentWillLoad() {
        this.useExternal = !!customElements.get('bp-sdk-external-vehicle-panel');
        customElements.whenDefined('bp-sdk-external-vehicle-panel').then(() => {
            this.useExternal = true;
        });
    }
    onVehicleInformationChange(vehicleInformation) {
        this.labelledBy = buildClassList('', {
            [this.ids.year]: !!vehicleInformation.year,
            [this.ids.make]: !!vehicleInformation.make,
            [this.ids.model]: !!vehicleInformation.model,
        });
    }
    render() {
        return [this.useExternal && this.renderExternal(), !this.useExternal && this.renderInternal()];
    }
    renderExternal() {
        return (h("bp-sdk-external-vehicle-panel", { answers: this.answers, canDelete: this.canDelete, canEdit: this.canEdit, canSave: this.canSave, code: this.code, handleClose: this.handleClose, handleDelete: this.handleDelete, handleEdit: this.handleEdit, handleOpen: this.handleOpen, isEditing: this.isEditing, isExpanded: this.isExpanded, isValid: this.isValid, isVehicleTrailer: this.isVehicleTrailer, questionGroup: this.questionGroup, shouldShowTrailers: this.shouldShowTrailers, vehicleInformation: this.vehicleInformation, vehicleLabel: this.vehicleLabel }));
    }
    renderContent() {
        return (h("div", { class: "bp-sdk-vehicle-panel__content", slot: `${this.ids.slot}-content` }, this.isValid && (h("bp-sdk-vehicle-panel-content", { additionalAnswers: this.answers, questionGroup: this.questionGroup, labelledBy: this.labelledBy }))));
    }
    renderInternal() {
        return (h("div", { class: "bp-sdk-vehicle-panel__container" }, this.isEditing && [
            h("bp-sdk-vehicle-group", { canSave: this.canSave, questionGroup: this.questionGroup, shouldShowTrailers: this.shouldShowTrailers, isVehicleTrailer: this.isVehicleTrailer, handleDelete: this.handleDelete }),
            this.renderContent(),
        ], !this.isEditing && [
            h("bp-sdk-icon-container", { name: this.icon }),
            h("bp-sdk-vehicle-panel-label", { class: "bp-sdk-vehicle-panel__label", vehicleLabel: this.vehicleLabel, onClick: this.onClick }),
            h("bp-sdk-vehicle-panel-buttons", { class: "bp-sdk-vehicle-panel__buttons", canDelete: this.canDelete, canEdit: this.canEdit, handleDelete: this.handleDelete, handleEdit: this.handleEdit }),
            this.renderContent(),
        ]));
    }
    static get is() { return "bp-sdk-vehicle-panel"; }
    static get originalStyleUrls() {
        return {
            "$": ["./bp-sdk-vehicle-panel.css"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["bp-sdk-vehicle-panel.css"]
        };
    }
    static get properties() {
        return {
            "code": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Code"
                },
                "attribute": "code",
                "reflect": false
            },
            "answers": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "IAnswer[]",
                    "resolved": "IAnswer[]",
                    "references": {
                        "IAnswer": {
                            "location": "import",
                            "path": "@boldpenguin/sdk-types",
                            "id": "../sdk-types/dist/types.d.ts::IAnswer"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Non-vehicle specific answers"
                },
                "defaultValue": "[]"
            },
            "questionGroup": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "IMappedQuestionGroupAnswers",
                    "resolved": "IMappedQuestionGroupAnswers",
                    "references": {
                        "IMappedQuestionGroupAnswers": {
                            "location": "import",
                            "path": "@boldpenguin/sdk-types",
                            "id": "../sdk-types/dist/types.d.ts::IMappedQuestionGroupAnswers"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Question Group"
                }
            },
            "canEdit": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Can edit"
                },
                "attribute": "can-edit",
                "reflect": false,
                "defaultValue": "false"
            },
            "isEditing": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Is editing"
                },
                "attribute": "is-editing",
                "reflect": false,
                "defaultValue": "false"
            },
            "isExpanded": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Is expanded"
                },
                "attribute": "is-expanded",
                "reflect": false,
                "defaultValue": "true"
            },
            "canDelete": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Can Delete"
                },
                "attribute": "can-delete",
                "reflect": false,
                "defaultValue": "false"
            },
            "canSave": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Can Save"
                },
                "attribute": "can-save",
                "reflect": false,
                "defaultValue": "true"
            },
            "handleClose": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "() => void",
                    "resolved": "() => void",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "On close function hook"
                }
            },
            "handleOpen": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "() => void",
                    "resolved": "() => void",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "On open function hook"
                }
            },
            "handleDelete": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "() => void",
                    "resolved": "() => void",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "On close function hook"
                }
            },
            "handleEdit": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "(e: MouseEvent) => void",
                    "resolved": "(e: MouseEvent) => void",
                    "references": {
                        "MouseEvent": {
                            "location": "global",
                            "id": "global::MouseEvent"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "On open function hook"
                }
            },
            "isValid": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Is vehicle valid"
                },
                "attribute": "is-valid",
                "reflect": false,
                "defaultValue": "true"
            },
            "vehicleInformation": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "IVehicleSummary",
                    "resolved": "IVehicleSummary",
                    "references": {
                        "IVehicleSummary": {
                            "location": "import",
                            "path": "@boldpenguin/sdk-types",
                            "id": "../sdk-types/dist/types.d.ts::IVehicleSummary"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Vehicle information"
                },
                "defaultValue": "{ year: '', make: '', model: '', configuration: '' }"
            },
            "vehicleLabel": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Default \"Add new vehicle\" label text"
                },
                "attribute": "vehicle-label",
                "reflect": false,
                "defaultValue": "'Add new vehicle'"
            },
            "shouldShowTrailers": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "should show trailers?"
                },
                "attribute": "should-show-trailers",
                "reflect": false,
                "defaultValue": "false"
            },
            "isVehicleTrailer": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Is vehicle trailer?"
                },
                "attribute": "is-vehicle-trailer",
                "reflect": false,
                "defaultValue": "false"
            }
        };
    }
    static get states() {
        return {
            "useExternal": {},
            "icon": {},
            "labelledBy": {},
            "ids": {}
        };
    }
    static get watchers() {
        return [{
                "propName": "isValid",
                "methodName": "onIsValidChange"
            }, {
                "propName": "vehicleInformation",
                "methodName": "onVehicleInformationChange"
            }];
    }
}
