import { Component, Element, Event, Host, Prop, Watch, h } from '@stencil/core';
import { Utils } from '../../../utils/utils';
import { IgcDragService } from '../../drag-drop/drag.service';
/**
 * @hidden
 */
export class IgcPaneHeaderComponent {
  constructor() {
    this.allowClose = true;
    this.allowMaximize = true;
    this.allowPinning = true;
    this.disabled = false;
    this.pinButtonClick = () => {
      this.pinToggle.emit();
    };
    this.maximizeButtonClick = () => {
      this.maximize.emit();
    };
    this.closeButtonClick = () => {
      this.close.emit();
    };
  }
  connectedCallback() {
    this.dragService = new IgcDragService(this.element);
    this.dragService.dragEdgeTolerance = 3;
    this.dragService.dragStart = args => {
      this.dragStarted.emit(args);
    };
    this.dragService.dragEnd = args => {
      this.dragEnded.emit(args);
    };
    this.dragService.dragMove = args => {
      this.dragMoved.emit(args);
    };
    this.forceDragging();
    this.elementConnected.emit(this.element);
  }
  disconnectedCallback() {
    if (this.dragService) {
      this.dragService.destroy();
    }
    this.elementDisconnected.emit(this.element);
  }
  forcedDragChanged() {
    this.forceDragging();
  }
  forceDragging() {
    if (this.forcedDrag) {
      this.dragService.forceDragging();
    }
  }
  render() {
    const commonParts = {
      active: this.isActive,
      disabled: this.disabled,
      floating: this.isFloating,
      window: this.isFloatingPaneHeader,
    };
    const paneHeaderParts = Utils.partNameMap(Object.assign({ 'pane-header': true }, commonParts));
    const paneHeaderContentParts = Utils.partNameMap(Object.assign({ 'pane-header-content': true }, commonParts));
    const paneHeaderActionsParts = Utils.partNameMap(Object.assign({ 'pane-header-actions': true }, commonParts));
    const exportParts = Utils.partNameMap(Object.assign({ 'pane-header-actions': true, 'pane-header-content': true }, commonParts), ',');
    return (h(Host, { part: paneHeaderParts, exportparts: exportParts },
      h("div", { part: paneHeaderContentParts, class: "header-text" },
        h("slot", null)),
      h("div", { part: paneHeaderActionsParts, class: "header-actions" },
        this.allowPinning &&
          h("igc-button-component", { onClick: this.pinButtonClick, style: { display: this.isFloating ? 'none' : 'flex' } },
            h("igc-icon-component", { name: this.pinned ? 'unpin' : 'pin', "aria-label": this.pinned ? this.resourceStrings.unpin : this.resourceStrings.pin, title: this.pinned ? this.resourceStrings.unpin : this.resourceStrings.pin })),
        this.allowMaximize &&
          h("igc-button-component", { name: "maximize", onClick: this.maximizeButtonClick },
            h("igc-icon-component", { name: this.maximized ? 'minimize' : 'maximize', "aria-label": this.maximized ? this.resourceStrings.minimize : this.resourceStrings.maximize, title: this.maximized ? this.resourceStrings.minimize : this.resourceStrings.maximize })),
        this.allowClose &&
          h("igc-button-component", { onClick: this.closeButtonClick },
            h("igc-icon-component", { name: "close", "aria-label": this.resourceStrings.close, title: this.resourceStrings.close })))));
  }
  static get is() { return "igc-pane-header-component"; }
  static get encapsulation() { return "shadow"; }
  static get originalStyleUrls() { return {
    "$": ["pane-header-component.scss"]
  }; }
  static get styleUrls() { return {
    "$": ["pane-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": ""
      }
    },
    "pinned": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "pinned",
      "reflect": false
    },
    "maximized": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "maximized",
      "reflect": false
    },
    "isFloating": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "is-floating",
      "reflect": false
    },
    "forcedDrag": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "forced-drag",
      "reflect": false
    },
    "isFloatingPaneHeader": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "is-floating-pane-header",
      "reflect": false
    },
    "allowClose": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "allow-close",
      "reflect": false,
      "defaultValue": "true"
    },
    "allowMaximize": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "allow-maximize",
      "reflect": false,
      "defaultValue": "true"
    },
    "allowPinning": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "allow-pinning",
      "reflect": false,
      "defaultValue": "true"
    },
    "pane": {
      "type": "unknown",
      "mutable": false,
      "complexType": {
        "original": "IgcContentPane",
        "resolved": "IgcContentPane",
        "references": {
          "IgcContentPane": {
            "location": "import",
            "path": "../dockmanager.public-interfaces"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      }
    },
    "isActive": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "is-active",
      "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"
    },
    "resourceStrings": {
      "type": "unknown",
      "mutable": false,
      "complexType": {
        "original": "IgcDockManagerResourceStrings",
        "resolved": "IgcDockManagerResourceStrings",
        "references": {
          "IgcDockManagerResourceStrings": {
            "location": "import",
            "path": "../dockmanager.public-interfaces"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      }
    }
  }; }
  static get events() { return [{
      "method": "pinToggle",
      "name": "pinToggle",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "complexType": {
        "original": "any",
        "resolved": "any",
        "references": {}
      }
    }, {
      "method": "maximize",
      "name": "maximize",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "complexType": {
        "original": "any",
        "resolved": "any",
        "references": {}
      }
    }, {
      "method": "close",
      "name": "close",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "complexType": {
        "original": "any",
        "resolved": "any",
        "references": {}
      }
    }, {
      "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": "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": "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": "elementConnected",
      "name": "elementConnected",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "complexType": {
        "original": "HTMLIgcPaneHeaderComponentElement",
        "resolved": "HTMLIgcPaneHeaderComponentElement",
        "references": {
          "HTMLIgcPaneHeaderComponentElement": {
            "location": "global"
          }
        }
      }
    }, {
      "method": "elementDisconnected",
      "name": "elementDisconnected",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "complexType": {
        "original": "HTMLIgcPaneHeaderComponentElement",
        "resolved": "HTMLIgcPaneHeaderComponentElement",
        "references": {
          "HTMLIgcPaneHeaderComponentElement": {
            "location": "global"
          }
        }
      }
    }]; }
  static get elementRef() { return "element"; }
  static get watchers() { return [{
      "propName": "forcedDrag",
      "methodName": "forcedDragChanged"
    }]; }
}
