import { Component, Element, Event, Host, Listen, Prop, Watch, h } from '@stencil/core';
import { Utils } from '../../utils/utils';
import { IgcTabHeadersPosition } from '../dockmanager/dockmanager.interfaces';
import { IgcDragService } from '../drag-drop/drag.service';
/**
 * @hidden
 */
export class IgcTabHeaderComponent {
  constructor() {
    this.selected = false;
    this.position = IgcTabHeadersPosition.top;
    this.disabled = false;
    this.iconClick = (ev) => {
      this.iconClicked.emit(ev);
    };
    this.keyDown = (ev) => {
      this.iconKeyDown.emit(ev);
    };
  }
  connectedCallback() {
    this.dragService = new IgcDragService(this.element);
    this.dragService.dragStart = args => {
      this.dragStarted.emit(args);
    };
    this.dragService.dragMove = args => {
      this.dragMoved.emit(args);
    };
    this.dragService.dragEnd = args => {
      this.dragEnded.emit(args);
    };
    this.forceDragging();
    this.elementConnected.emit(this.element);
  }
  disconnectedCallback() {
    if (this.dragService) {
      this.dragService.destroy();
    }
    this.elementDisconnected.emit(this.element);
  }
  handleMouseDown() {
    this.tabMouseDown.emit();
  }
  forcedDragChanged() {
    this.forceDragging();
  }
  forceDragging() {
    if (this.forcedDrag) {
      this.dragService.forceDragging();
    }
  }
  render() {
    const parts = Utils.partNameMap({
      'tab-header': true,
      top: this.position === IgcTabHeadersPosition.top,
      active: this.isActive,
      selected: this.selected,
      disabled: this.disabled,
      bottom: this.position === IgcTabHeadersPosition.bottom,
    });
    return (h(Host, { role: "tab", part: parts, "aria-label": this.header, "aria-selected": this.selected ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', tabIndex: !this.selected || this.disabled ? -1 : 0 },
      h("slot", null),
      this.iconName &&
        h("igc-button-component", { style: {
            visibility: this.selected ? 'visible' : 'hidden',
            pointerEvents: this.selected && !this.disabled ? 'all' : 'none'
          }, onClick: this.iconClick, onKeyDown: this.keyDown },
          h("igc-icon-component", { name: this.iconName, "aria-label": this.iconName === 'close' ? this.resourceStrings.close : this.resourceStrings.moreOptions, title: this.iconName === 'close' ? this.resourceStrings.close : this.resourceStrings.moreOptions }))));
  }
  static get is() { return "igc-tab-header-component"; }
  static get encapsulation() { return "shadow"; }
  static get originalStyleUrls() { return {
    "$": ["tab-header-component.scss"]
  }; }
  static get styleUrls() { return {
    "$": ["tab-header-component.css"]
  }; }
  static get properties() { return {
    "dragService": {
      "type": "unknown",
      "mutable": true,
      "complexType": {
        "original": "IgcDragService",
        "resolved": "IgcDragService",
        "references": {
          "IgcDragService": {
            "location": "import",
            "path": "../drag-drop/drag.service"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      }
    },
    "selected": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "selected",
      "reflect": false,
      "defaultValue": "false"
    },
    "position": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "IgcTabHeadersPosition",
        "resolved": "IgcTabHeadersPosition.bottom | IgcTabHeadersPosition.top",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "position",
      "reflect": false,
      "defaultValue": "IgcTabHeadersPosition.top"
    },
    "iconName": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "icon-name",
      "reflect": false
    },
    "header": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "header",
      "reflect": false
    },
    "isActive": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "is-active",
      "reflect": false
    },
    "resourceStrings": {
      "type": "unknown",
      "mutable": false,
      "complexType": {
        "original": "IgcDockManagerResourceStrings",
        "resolved": "IgcDockManagerResourceStrings",
        "references": {
          "IgcDockManagerResourceStrings": {
            "location": "import",
            "path": "../dockmanager/dockmanager.public-interfaces"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      }
    },
    "forcedDrag": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "forced-drag",
      "reflect": false
    },
    "disabled": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "disabled",
      "reflect": false,
      "defaultValue": "false"
    }
  }; }
  static get events() { return [{
      "method": "dragStarted",
      "name": "dragStarted",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "complexType": {
        "original": "IgcDragStartEventArguments",
        "resolved": "IgcDragStartEventArguments",
        "references": {
          "IgcDragStartEventArguments": {
            "location": "import",
            "path": "../drag-drop/drag.service"
          }
        }
      }
    }, {
      "method": "dragMoved",
      "name": "dragMoved",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "complexType": {
        "original": "IgcDragMoveEventArguments",
        "resolved": "IgcDragMoveEventArguments",
        "references": {
          "IgcDragMoveEventArguments": {
            "location": "import",
            "path": "../drag-drop/drag.service"
          }
        }
      }
    }, {
      "method": "dragEnded",
      "name": "dragEnded",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "complexType": {
        "original": "IgcDragEventArguments",
        "resolved": "IgcDragEventArguments",
        "references": {
          "IgcDragEventArguments": {
            "location": "import",
            "path": "../drag-drop/drag.service"
          }
        }
      }
    }, {
      "method": "tabMouseDown",
      "name": "tabMouseDown",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "complexType": {
        "original": "any",
        "resolved": "any",
        "references": {}
      }
    }, {
      "method": "iconClicked",
      "name": "iconClicked",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "complexType": {
        "original": "any",
        "resolved": "any",
        "references": {}
      }
    }, {
      "method": "iconKeyDown",
      "name": "iconKeyDown",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "complexType": {
        "original": "KeyboardEvent",
        "resolved": "KeyboardEvent",
        "references": {
          "KeyboardEvent": {
            "location": "global"
          }
        }
      }
    }, {
      "method": "elementConnected",
      "name": "elementConnected",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "complexType": {
        "original": "HTMLIgcTabHeaderComponentElement",
        "resolved": "HTMLIgcTabHeaderComponentElement",
        "references": {
          "HTMLIgcTabHeaderComponentElement": {
            "location": "global"
          }
        }
      }
    }, {
      "method": "elementDisconnected",
      "name": "elementDisconnected",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "complexType": {
        "original": "HTMLIgcTabHeaderComponentElement",
        "resolved": "HTMLIgcTabHeaderComponentElement",
        "references": {
          "HTMLIgcTabHeaderComponentElement": {
            "location": "global"
          }
        }
      }
    }]; }
  static get elementRef() { return "element"; }
  static get watchers() { return [{
      "propName": "forcedDrag",
      "methodName": "forcedDragChanged"
    }]; }
  static get listeners() { return [{
      "name": "mousedown",
      "method": "handleMouseDown",
      "target": undefined,
      "capture": false,
      "passive": true
    }]; }
}
