import { Component, Host, h, Prop, Watch, State, Element } from '@stencil/core';
export class UxplHelpSideBar {
  constructor() {
    this.show = false;
    this.maximize = false;
  }
  async urlValueChanged(newValue, oldValue) {
    if (newValue !== oldValue) {
      this.helpConfig = undefined;
      this.helpConfig = Object.assign({}, (await this.fetchConfig(this.helpSettingsUrl)));
    }
  }
  async componentWillLoad() {
    if (this.helpSettingsUrl) {
      this.helpConfig = await this.fetchConfig(this.helpSettingsUrl);
    }
  }
  async fetchConfig(url) {
    let response = await fetch(url, {
      method: 'GET',
      headers: this.auth ? { "Authorization": "Bearer: " + this.auth } : undefined
    });
    let config = await response.json();
    return config;
  }
  toggleMaximize() {
    this.maximize = !this.maximize;
  }
  toggleArticle(item) {
    switch (item.type) {
      case 'inline':
        if (item.open) {
          item.open = false;
        }
        else {
          item.open = true;
        }
        this.helpConfig = Object.assign({}, this.helpConfig);
        break;
      case 'external':
        window.open(item.url, "_blank");
        break;
      default:
        console.log('invalid toggle action for link: ', item);
    }
  }
  render() {
    if (this.show && this.helpConfig) {
      return (h(Host, null,
        h("div", { class: {
            "help-page": true,
            "maximize": this.maximize
          }, part: "help-page" },
          h("div", { class: "help-heading help-heading-box", part: "heading" },
            h("div", { class: "help-heading-section" },
              h("div", { class: "help-heading-title" }, this.helpConfig['side-bar'].label)),
            h("div", { class: "maximize-section", part: "maximize-section" },
              h("uxpl-icon", { size: "16px", class: "maximize-icon", icon: this.maximize ? 'ic-minimize' : 'ic-maximize', onClick: () => { this.toggleMaximize(); } }))),
          h("div", { class: "help-details", part: "details" }, this.helpConfig['side-bar'].section.map(section => {
            return (h("div", { class: "help-section" },
              section.type === 'video' ?
                h("uxpl-video-carousel", null, section.item.map(item => {
                  return (h("uxpl-video", { url: item.url, label: item.label }));
                }))
                : undefined,
              section.type === 'inline' ?
                h("div", null,
                  h("div", { class: "help-heading without-box-shadow" },
                    h("div", { class: "help-section-title" }, section.label)),
                  section.item.map(item => {
                    return (h("div", { class: "help-section-row-container" },
                      h("div", { class: "help-section-detail-row", onClick: () => this.toggleArticle(item) },
                        item.icon ?
                          h("uxpl-icon", { url: item.icon, class: "section-heading-icon", size: "20px" })
                          : undefined,
                        h("div", { class: "section-detail-heading" }, item.label),
                        item.type === 'inline' ?
                          h("uxpl-icon", { class: {
                              "section-detail-chevron": true,
                              "open": item.open ? true : false
                            }, icon: "pl-icon-chevron-right", size: "25px", color: "#0081cb" })
                          : undefined,
                        item.type === 'external' ?
                          h("uxpl-icon", { class: {
                              "section-detail-external": true
                            }, icon: "ic-open-external", color: "#0081CB", size: "25px" })
                          : undefined),
                      h("div", { class: "help-section-row-content" }, (item.type === 'inline' && item.open) ?
                        h("uxpl-archive", { url: item.url, auth: this.auth })
                        : undefined)));
                  }))
                : undefined,
              section.type === 'external' ?
                h("div", null,
                  h("div", { class: "help-heading without-box-shadow" }, section.label ?
                    h("div", { class: "help-section-title" }, section.label)
                    : undefined),
                  section.item.map((item) => {
                    return (h("div", { class: "help-section-row-container" },
                      h("div", { class: "help-external-link-content" },
                        h("div", { class: "ext-icon-holder" },
                          h("uxpl-icon", { size: "20px", class: "external-link-image", color: "black", url: item.icon })),
                        h("div", { class: "help-external-link" },
                          h("a", { href: item.url, target: "_blank", class: "title", title: item.title }, item.label),
                          h("div", { class: "external-link-addl" }, item["additional-text"])))));
                  }))
                : undefined));
          })))));
    }
    else {
      undefined;
    }
  }
  static get is() { return "uxpl-help-side-bar"; }
  static get encapsulation() { return "shadow"; }
  static get originalStyleUrls() { return {
    "$": ["uxpl-help-side-bar.css"]
  }; }
  static get styleUrls() { return {
    "$": ["uxpl-help-side-bar.css"]
  }; }
  static get properties() { return {
    "helpSettingsUrl": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "help-settings-url",
      "reflect": false
    },
    "auth": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "auth",
      "reflect": false
    },
    "show": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "show",
      "reflect": false,
      "defaultValue": "false"
    }
  }; }
  static get states() { return {
    "maximize": {},
    "helpConfig": {}
  }; }
  static get elementRef() { return "el"; }
  static get watchers() { return [{
      "propName": "auth",
      "methodName": "urlValueChanged"
    }, {
      "propName": "helpSettingsUrl",
      "methodName": "urlValueChanged"
    }]; }
}
