import { h } from "@stencil/core";
import { ZIconButton } from "../internal-component/z-icon-button";
import { useTranslation } from "../../utils/utils";
import { dragReorder, reorderIcon } from "../../utils/icon-svg";
import { configStore } from "../../store/store";
export class MasterDataItem {
    item;
    index;
    isFirst;
    isLast;
    isSearching = false;
    type = 'tag';
    draggableItem = false;
    edit;
    moveToTop;
    moveToBottom;
    itemDragStart;
    itemDragOver;
    itemDrop;
    isMenuOpen = false;
    toggleMenu = (e) => {
        e.stopPropagation();
        this.isMenuOpen = !this.isMenuOpen;
    };
    closeMenu = () => {
        this.isMenuOpen = false;
    };
    handleEdit = () => {
        this.edit.emit();
    };
    handleMoveToTop = () => {
        this.moveToTop.emit(this.item.id);
        this.closeMenu();
    };
    handleMoveToBottom = () => {
        this.moveToBottom.emit(this.item.id);
        this.closeMenu();
    };
    componentDidLoad() {
        document.addEventListener('click', this.closeMenu);
    }
    disconnectedCallback() {
        document.removeEventListener('click', this.closeMenu);
    }
    render() {
        const t = useTranslation();
        const theme = configStore.get('theme');
        return (h("div", { key: '929a203bcbabb86b10342f9640b79ffa269b0155', "data-theme": theme, class: "master-data-item", draggable: this.draggableItem, onDragStart: () => this.itemDragStart.emit(this.item.id), onDragOver: (e) => {
                e.preventDefault();
                this.itemDragOver.emit(this.item.id);
            }, onDrop: (e) => {
                e.preventDefault();
                this.itemDrop.emit(this.item.id);
            } }, !this.isSearching && (h("div", { key: 'af65cf04eaad6d05a93a2d29480681c1ec47432f', class: "master-data-item-drag-handle" }, dragReorder())), h("div", { key: 'e80e1cf5aa87ffdc47fdf171e450ce3281aca176', class: "master-data-item-color", style: { backgroundColor: this.item.color } }), h("div", { key: '44fec370d88ffeded3f518b1028de6d2d978b98b', class: "master-data-item-name" }, this.item.name), h("div", { key: 'fab521cc60a3fe27b2adf639d1440422347a7a23', class: "master-data-item-actions" }, !this.isSearching && (h("div", { key: '598b878d996183b51065bf27ee5193bb3281fba9', class: "relative" }, h(ZIconButton, { key: '7b3eff85ceb6475fa5e1c436eb23c75f4fb09728', icon: reorderIcon(), onClick: this.toggleMenu, variant: "text", noPadding: true }), this.isMenuOpen && (h("div", { key: '7d154027bd68e0790a383eb3b9d3d2173170dbb9', class: "master-data-menu" }, h("div", { key: 'a16a01a4858518e37b4eff0915ba6c6892c4b558', class: `master-data-menu-item ${this.isFirst ? 'disabled' : ''}`, onClick: this.handleMoveToTop }, t('move_to_top')), h("div", { key: '36396a9de525b87e7d86423ca2ba1bf485821b48', class: `master-data-menu-item ${this.isLast ? 'disabled' : ''}`, onClick: this.handleMoveToBottom }, t('move_to_bottom')))))), h(ZIconButton, { key: 'bab9d36a38205748e0f441d8b9899e9ff71e7d28', id: `edit-master-${this.type}-button`, iconName: "Pencil", onClick: this.handleEdit, variant: "text", noPadding: true }))));
    }
    static get is() { return "master-data-item"; }
    static get originalStyleUrls() {
        return {
            "$": ["master-data-item.css"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["master-data-item.css"]
        };
    }
    static get properties() {
        return {
            "item": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "{ id: string; name: string; color: string; sequence: number }",
                    "resolved": "{ id: string; name: string; color: string; sequence: number; }",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false
            },
            "index": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "index"
            },
            "isFirst": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "is-first"
            },
            "isLast": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "is-last"
            },
            "isSearching": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "is-searching",
                "defaultValue": "false"
            },
            "type": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "'tag' | 'status'",
                    "resolved": "\"status\" | \"tag\"",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "type",
                "defaultValue": "'tag'"
            },
            "draggableItem": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "draggable-item",
                "defaultValue": "false"
            }
        };
    }
    static get states() {
        return {
            "isMenuOpen": {}
        };
    }
    static get events() {
        return [{
                "method": "edit",
                "name": "edit",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "complexType": {
                    "original": "void",
                    "resolved": "void",
                    "references": {}
                }
            }, {
                "method": "moveToTop",
                "name": "moveToTop",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                }
            }, {
                "method": "moveToBottom",
                "name": "moveToBottom",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                }
            }, {
                "method": "itemDragStart",
                "name": "itemDragStart",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                }
            }, {
                "method": "itemDragOver",
                "name": "itemDragOver",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                }
            }, {
                "method": "itemDrop",
                "name": "itemDrop",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                }
            }];
    }
}
