import { Component, h, Prop, Event, State, Watch } from '@stencil/core';
export class UxplSelectionPopup {
  constructor() {
    /**
     * Support checkbox and radio buttons.
     */
    this.type = 'checkbox';
    this.contentId = 'pop-up-internal-content';
    this.sectionEls = {};
  }
  showTriggered(show) {
    if (show) {
      this.innerConfig = this.cloneConfig(this.config);
    }
    ;
  }
  configChanged(config) {
    this.innerConfig = this.cloneConfig(config);
    ;
  }
  cloneConfig(config) {
    if (config) {
      return JSON.parse(JSON.stringify(config));
    }
    else {
      return undefined;
    }
  }
  get changed() {
    if (JSON.stringify(this.config) !== JSON.stringify(this.innerConfig)) {
      return true;
    }
  }
  componentWillLoad() {
  }
  componentDidLoad() {
    // attach listener for click outside of pop-up
    document.addEventListener('mousedown', (event) => {
      // @ts-ignore
      // this.childOf(event.target, this.contentId);
      // @ts-ignore
      if (event.target === this.el || event.target.id === this.triggerId || event.target.id === this.contentId || this.childOf(event.target, this.contentId)) {
        // ignore event as inside control
      }
      else {
        if (this.show === true) {
          this.show = false;
        }
      }
    });
  }
  childOf(childObject, containerObject) {
    var returnValue = false;
    var currentObject;
    if (typeof containerObject === 'string') {
      containerObject = document.getElementById(containerObject);
      // if no container we are outside the element so return false
      if (containerObject === undefined) {
        return false;
      }
      else {
        // console.log('container object is:', containerObject);
      }
    }
    if (typeof childObject === 'string') {
      childObject = document.getElementById(childObject);
    }
    currentObject = childObject === null || childObject === void 0 ? void 0 : childObject.parentNode;
    while (currentObject !== undefined) {
      if (currentObject === document.body) {
        break;
      }
      if (currentObject && containerObject && (currentObject.id == containerObject.id)) {
        returnValue = true;
        break;
      }
      // Move up the hierarchy
      currentObject = currentObject === null || currentObject === void 0 ? void 0 : currentObject.parentNode;
    }
    return returnValue;
  }
  handleCheckboxClick(event, entry) {
    if (this.type === 'radio') {
      // Unselect everything and apply the most recent selection
      this.innerConfig.selectionOptions.forEach(option => {
        if (option.sectionOptions) {
          option.sectionOptions.forEach(sectionOption => {
            sectionOption.selected = false;
            if (entry.label === sectionOption.label) {
              sectionOption.selected = true;
            }
          });
        }
        if (option.option) {
          option.option.selected = false;
          if (option.option.label === entry.label) {
            option.option.selected = true;
          }
        }
      });
      this.innerConfig = this.cloneConfig(this.innerConfig);
    }
    else if (this.type === 'checkbox') {
      entry.selected = !entry.selected;
      this.innerConfig = this.cloneConfig(this.innerConfig);
      event.stopPropagation();
    }
  }
  handleApplyClick(event) {
    event === null || event === void 0 ? void 0 : event.stopPropagation();
    this.config = this.cloneConfig(this.innerConfig);
    this.uxplChanged.emit(this.config);
    this.show = false;
  }
  handleClearClick(event) {
    this.innerConfig.selectionOptions.forEach((option) => {
      var _a;
      if ((option === null || option === void 0 ? void 0 : option.type) === "Option" /* Option */) {
        if (option === null || option === void 0 ? void 0 : option.option) {
          option.option.selected = false;
        }
      }
      else {
        if ((option === null || option === void 0 ? void 0 : option.type) === "Section" /* Section */) {
          (_a = option === null || option === void 0 ? void 0 : option.sectionOptions) === null || _a === void 0 ? void 0 : _a.forEach((sectionOption) => {
            sectionOption.selected = false;
          });
        }
        ;
      }
    });
    this.innerConfig = this.cloneConfig(this.innerConfig);
    event.stopPropagation();
    this.render();
    if (this.applyOnClear) {
      this.handleApplyClick();
    }
  }
  handleSectionClick(id) {
    var _a, _b;
    if (this.sectionEls[id]) {
      this.sectionEls[id].hidden = !this.sectionEls[id].hidden;
      if (this.sectionEls[id].hidden) {
        (_a = this.sectionEls[id].parentElement) === null || _a === void 0 ? void 0 : _a.classList.add('rotate-section-icon');
      }
      else {
        (_b = this.sectionEls[id].parentElement) === null || _b === void 0 ? void 0 : _b.classList.remove('rotate-section-icon');
      }
    }
  }
  handleRadioChange(e) {
    e.stopPropagation();
  }
  render() {
    var _a, _b, _c, _d;
    if (this.show && this.type === 'checkbox') {
      return (h("host", null,
        h("div", { class: {
            'uxpl-selection-popup': true,
          }, style: {
            "max-height": this.maxHeight ? this.maxHeight : '300px',
            "height": this.maxHeight ? this.maxHeight : '300px',
            "max-width": this.maxWidth ? this.maxWidth : '300px',
            "width": this.maxWidth ? this.maxWidth : '300px'
          }, part: "popup-content" },
          h("div", { class: "popup-container" },
            h("div", { class: "options-outer-container", id: "pop-up-internal-content" },
              h("div", { class: "options-container", part: "options-container" }, (_b = (_a = this.innerConfig) === null || _a === void 0 ? void 0 : _a.selectionOptions) === null || _b === void 0 ? void 0 : _b.map((optionEntry, idx) => {
                var _a;
                return optionEntry.type === 'Option' ?
                  h("div", { class: "option single-option", part: "single-option" },
                    h("div", null, optionEntry.option.label),
                    h("uxpl-checkbox", { checked: optionEntry.option.selected, onClicked: (event) => this.handleCheckboxClick(event, optionEntry.option) }))
                  :
                    h("div", { class: "option section-option", part: "section-option" },
                      h("div", { class: "section-header" },
                        h("div", null, optionEntry.sectionLabel),
                        h("uxpl-icon", { color: "#595959", icon: "ic-expand-less", size: "24px", onClick: () => this.handleSectionClick('section-' + idx) })),
                      h("div", { ref: (el) => this.sectionEls['section-' + idx] = el }, (_a = optionEntry === null || optionEntry === void 0 ? void 0 : optionEntry.sectionOptions) === null || _a === void 0 ? void 0 : _a.map(optionSectionEntry => h("div", { class: "option single-option" },
                        h("div", null, optionSectionEntry.label),
                        h("uxpl-checkbox", { checked: optionSectionEntry.selected, onClicked: (event) => this.handleCheckboxClick(event, optionSectionEntry) })))));
              })),
              h("div", { class: "options-footer", part: "options-footer" },
                h("uxpl-button", { "text-color": "#212121", type: "no-border", onClicked: (e) => this.handleClearClick(e) }, "Clear all"),
                h("uxpl-button", { type: "primary", disabled: !this.changed, onClicked: (e) => this.handleApplyClick(e) }, "Apply")))))));
    }
    else if (this.show && this.type === 'radio') {
      return (h("host", null,
        h("div", { class: {
            'uxpl-selection-popup': true,
          }, style: {
            "max-height": this.maxHeight ? this.maxHeight : '300px',
            "height": this.maxHeight ? this.maxHeight : '300px',
            "max-width": this.maxWidth ? this.maxWidth : '300px',
            "width": this.maxWidth ? this.maxWidth : '300px'
          }, part: "popup-content" },
          h("div", { class: "popup-container" },
            h("div", { class: "options-outer-container", id: "pop-up-internal-content" },
              h("div", { class: "options-container", part: "options-container" },
                h("uxpl-radio-group", { id: "{this.triggerId}", class: "radio-group", onUxplChanged: (e) => this.handleRadioChange(e) }, (_d = (_c = this.innerConfig) === null || _c === void 0 ? void 0 : _c.selectionOptions) === null || _d === void 0 ? void 0 : _d.map((optionEntry, idx) => {
                  var _a;
                  return optionEntry.type === 'Option' ?
                    h("div", { class: "option single-option", part: "single-option" },
                      h("div", null, optionEntry.option.label),
                      h("uxpl-radio", { checked: optionEntry.option.selected, value: optionEntry.option.label, onClick: (event) => this.handleCheckboxClick(event, optionEntry.option) }))
                    :
                      h("div", { class: "option section-option", part: "section-option" },
                        h("div", { class: "section-header" },
                          h("div", null, optionEntry.sectionLabel),
                          h("uxpl-icon", { color: "#595959", icon: "ic-expand-less", size: "24px", onClick: () => this.handleSectionClick('section-' + idx) })),
                        h("div", { ref: (el) => this.sectionEls['section-' + idx] = el }, (_a = optionEntry === null || optionEntry === void 0 ? void 0 : optionEntry.sectionOptions) === null || _a === void 0 ? void 0 : _a.map(optionSectionEntry => h("div", { class: "option single-option" },
                          h("div", null, optionSectionEntry.label),
                          h("uxpl-radio", { value: optionSectionEntry.label, onClick: (event) => this.handleCheckboxClick(event, optionSectionEntry) })))));
                }))),
              h("div", { class: "options-footer", part: "options-footer" },
                h("uxpl-button", { "text-color": "#212121", type: "no-border", onClicked: (e) => this.handleClearClick(e) }, "Clear"),
                h("uxpl-button", { type: "primary", disabled: !this.changed, onClicked: (e) => this.handleApplyClick(e) }, "Apply")))))));
    }
    else {
      return (h("host", null));
    }
  }
  static get is() { return "uxpl-selection-popup"; }
  static get encapsulation() { return "shadow"; }
  static get originalStyleUrls() { return {
    "$": ["uxpl-selection-popup.css"]
  }; }
  static get styleUrls() { return {
    "$": ["uxpl-selection-popup.css"]
  }; }
  static get properties() { return {
    "show": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "show"
      },
      "attribute": "show",
      "reflect": false
    },
    "config": {
      "type": "unknown",
      "mutable": false,
      "complexType": {
        "original": "SelectionBoxConfig",
        "resolved": "SelectionBoxConfig",
        "references": {
          "SelectionBoxConfig": {
            "location": "import",
            "path": "../../models/selectionBox"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "popupSelectionConfig"
      }
    },
    "maxHeight": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Max height for pop up eg: 300px"
      },
      "attribute": "max-height",
      "reflect": false
    },
    "maxWidth": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Max width for pop up eg: 300px"
      },
      "attribute": "max-width",
      "reflect": false
    },
    "triggerId": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Id of triger element (so it can be ignored as a click on the component)"
      },
      "attribute": "trigger-id",
      "reflect": false
    },
    "applyOnClear": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Apply and close popup on clear"
      },
      "attribute": "apply-on-clear",
      "reflect": false
    },
    "type": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Support checkbox and radio buttons."
      },
      "attribute": "type",
      "reflect": false,
      "defaultValue": "'checkbox'"
    }
  }; }
  static get states() { return {
    "innerConfig": {}
  }; }
  static get events() { return [{
      "method": "uxplChanged",
      "name": "uxplChanged",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "complexType": {
        "original": "SelectionBoxConfig",
        "resolved": "SelectionBoxConfig",
        "references": {
          "SelectionBoxConfig": {
            "location": "import",
            "path": "../../models/selectionBox"
          }
        }
      }
    }]; }
  static get elementRef() { return "el"; }
  static get watchers() { return [{
      "propName": "show",
      "methodName": "showTriggered"
    }, {
      "propName": "config",
      "methodName": "configChanged"
    }]; }
}
