import { h } from '@stencil/core';
import { ALLOWED_ANIMATIONS, ALLOWED_VARIANTS, DEFAULT_VALUES, SKELETON_ARIA, VARIANT_TYPES, ANIMATION_TYPES, } from './ez-skeleton.constants';
import initI18n from '../../utils/i18n';
export class EzSkeleton {
  constructor() {
    this.items = [];
    this.template = undefined;
    this.count = DEFAULT_VALUES.COUNT;
    this.variant = DEFAULT_VALUES.VARIANT;
    this.width = null;
    this.height = null;
    this.marginTop = null;
    this.marginRight = null;
    this.marginBottom = null;
    this.marginLeft = null;
    this.animation = DEFAULT_VALUES.ANIMATION;
  }
  async componentWillLoad() {
    this.i18n = await initI18n();
    this.initializeItems();
  }
  componentWillUpdate() {
    this.initializeItems();
  }
  initializeItems() {
    this.items = Array(this.count).fill(1);
  }
  getSkeletonConfig(props) {
    if (!props)
      return;
    if ((props === null || props === void 0 ? void 0 : props.variant) == VARIANT_TYPES.CIRCLE) {
      props.width = props.width || 'var(--skeleton-width, 40px)';
      props.height = props.height || 'var(--skeleton-height, 40px)';
    }
    else {
      props.width = props.width || 'var(--skeleton-width, 100%)';
    }
    const width = (props.marginRight || props.marginLeft) && props.width && props.variant != VARIANT_TYPES.CIRCLE
      ? `calc(${props.width} ${props.marginRight ? `- ${props.marginRight}` : ''} ${props.marginLeft ? `- ${props.marginLeft}` : ''})`
      : props.width;
    return {
      skeletonClasses: {
        skeleton: true,
        circle: props.variant === VARIANT_TYPES.CIRCLE,
        rect: props.variant === VARIANT_TYPES.RECT,
        progress: props.animation === ANIMATION_TYPES.PROGRESS,
        pulse: props.animation === ANIMATION_TYPES.PULSE,
      },
      styles: {
        width,
        height: props.height,
        marginTop: props.marginTop,
        marginRight: props.marginRight,
        marginBottom: props.marginBottom,
        marginLeft: props.marginLeft,
      },
    };
  }
  validateVariant(variant) {
    return ALLOWED_VARIANTS.includes(variant) ? variant : DEFAULT_VALUES.VARIANT;
  }
  validateAnimation(animation) {
    return ALLOWED_ANIMATIONS.includes(animation) ? animation : DEFAULT_VALUES.ANIMATION;
  }
  renderSkeletonTemplate(templateContent) {
    var _a;
    const innerHTMLTemp = ((_a = templateContent['$attrs']) === null || _a === void 0 ? void 0 : _a.innerHTML) || templateContent;
    if (typeof innerHTMLTemp === 'string') {
      const tempDiv = document.createElement('div');
      tempDiv.innerHTML = innerHTMLTemp;
      const elements = (tempDiv === null || tempDiv === void 0 ? void 0 : tempDiv.querySelectorAll(':not(.skeleton) > *')) || [];
      return Array.from(elements).map(element => {
        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
        if ((_a = element === null || element === void 0 ? void 0 : element.classList) === null || _a === void 0 ? void 0 : _a.contains('skeleton')) {
          const skeletonConfig = this.getSkeletonConfig({
            variant: this.validateVariant(((_b = element.getAttribute('variant')) === null || _b === void 0 ? void 0 : _b.replace(/[{}]/g, '')) || this.variant),
            width: ((_c = element.getAttribute('width')) === null || _c === void 0 ? void 0 : _c.replace(/[{}]/g, '')) || this.width,
            height: ((_d = element.getAttribute('height')) === null || _d === void 0 ? void 0 : _d.replace(/[{}]/g, '')) || this.height,
            marginTop: ((_e = element.getAttribute('marginTop')) === null || _e === void 0 ? void 0 : _e.replace(/[{}]/g, '')) || this.marginTop,
            marginLeft: ((_f = element.getAttribute('marginLeft')) === null || _f === void 0 ? void 0 : _f.replace(/[{}]/g, '')) || this.marginLeft,
            marginRight: ((_g = element.getAttribute('marginRight')) === null || _g === void 0 ? void 0 : _g.replace(/[{}]/g, '')) || this.marginRight,
            marginBottom: ((_h = element.getAttribute('marginBottom')) === null || _h === void 0 ? void 0 : _h.replace(/[{}]/g, '')) || this.marginBottom,
            animation: this.validateAnimation(((_j = element.getAttribute('animation')) === null || _j === void 0 ? void 0 : _j.replace(/[{}]/g, '')) || this.animation),
          });
          const count = Number((_k = element.getAttribute('count')) === null || _k === void 0 ? void 0 : _k.replace(/[{}]/g, '')) || 1;
          return Array(count)
            .fill(1)
            .map((_, index) => this.renderSkeletonItem(index, skeletonConfig));
        }
        return h("div", { innerHTML: element.outerHTML });
      });
    }
    return templateContent;
  }
  renderSkeletonItem(index, skeletonConfig) {
    const config = skeletonConfig ||
      this.getSkeletonConfig({
        variant: this.validateVariant(this.variant),
        animation: this.validateAnimation(this.animation),
        width: this.width,
        height: this.height,
        marginTop: this.marginTop,
        marginRight: this.marginRight,
        marginBottom: this.marginBottom,
        marginLeft: this.marginLeft,
      });
    return this.renderSkeletonSpan(index, config);
  }
  renderSkeletonSpan(index, config) {
    return (h("span", { key: index, class: config === null || config === void 0 ? void 0 : config.skeletonClasses, style: config === null || config === void 0 ? void 0 : config.styles, "data-busy": SKELETON_ARIA.DATA_BUSY, "data-valuemin": SKELETON_ARIA.DATA_VALUEMIN, "data-valuemax": SKELETON_ARIA.DATA_VALUEMAX, "data-valuetext": this.i18n("app.loading"), role: SKELETON_ARIA.ROLE, tabindex: SKELETON_ARIA.TABINDEX }));
  }
  render() {
    return !this.template ? this.items.map((_, index) => this.renderSkeletonItem(index)) : this.renderSkeletonTemplate(this.template);
  }
  static get is() { return "ez-skeleton"; }
  static get originalStyleUrls() {
    return {
      "$": ["ez-skeleton.css"]
    };
  }
  static get styleUrls() {
    return {
      "$": ["ez-skeleton.css"]
    };
  }
  static get properties() {
    return {
      "template": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "HTMLElement | string",
          "resolved": "HTMLElement | string",
          "references": {
            "HTMLElement": {
              "location": "global"
            }
          }
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [{
              "name": "prop",
              "text": "{HTMLElement | string} template - The template to be used for the skeleton."
            }],
          "text": "The template to be used for the skeleton. Can be an HTMLElement or a string."
        },
        "attribute": "template",
        "reflect": false
      },
      "count": {
        "type": "number",
        "mutable": false,
        "complexType": {
          "original": "number",
          "resolved": "number",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [{
              "name": "memberof",
              "text": "Skeleton"
            }],
          "text": "Number of rows of current skeleton type"
        },
        "attribute": "count",
        "reflect": false,
        "defaultValue": "DEFAULT_VALUES.COUNT"
      },
      "variant": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "SkeletonVariant",
          "resolved": "\"circle\" | \"rect\" | \"text\"",
          "references": {
            "SkeletonVariant": {
              "location": "import",
              "path": "./ez-skeleton.constants"
            }
          }
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [{
              "name": "type",
              "text": "{('circle' , 'rect', 'text')}"
            }, {
              "name": "memberof",
              "text": "Skeleton"
            }],
          "text": "Variant of the skeleton - circle or row"
        },
        "attribute": "variant",
        "reflect": false,
        "defaultValue": "DEFAULT_VALUES.VARIANT"
      },
      "width": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [{
              "name": "type",
              "text": "{string}"
            }, {
              "name": "memberof",
              "text": "Skeleton"
            }],
          "text": "Width of the skeleton ex. 100px, 100%, auto etc."
        },
        "attribute": "width",
        "reflect": false,
        "defaultValue": "null"
      },
      "height": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [{
              "name": "type",
              "text": "{string}"
            }, {
              "name": "memberof",
              "text": "Skeleton"
            }],
          "text": "Height of the skeleton ex. 100px, 100%, auto etc."
        },
        "attribute": "height",
        "reflect": false,
        "defaultValue": "null"
      },
      "marginTop": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [{
              "name": "type",
              "text": "{string}"
            }, {
              "name": "memberof",
              "text": "Skeleton"
            }],
          "text": "MarginTop of the skeleton ex. 10px, 0 etc."
        },
        "attribute": "margin-top",
        "reflect": false,
        "defaultValue": "null"
      },
      "marginRight": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [{
              "name": "type",
              "text": "{string}"
            }, {
              "name": "memberof",
              "text": "Skeleton"
            }],
          "text": "MarginRight of the skeleton ex. 10px, 0 etc."
        },
        "attribute": "margin-right",
        "reflect": false,
        "defaultValue": "null"
      },
      "marginBottom": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [{
              "name": "type",
              "text": "{string}"
            }, {
              "name": "memberof",
              "text": "Skeleton"
            }],
          "text": "MarginBottom of the skeleton ex. 10px, 0 etc."
        },
        "attribute": "margin-bottom",
        "reflect": false,
        "defaultValue": "null"
      },
      "marginLeft": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [{
              "name": "type",
              "text": "{string}"
            }, {
              "name": "memberof",
              "text": "Skeleton"
            }],
          "text": "MarginLeft of the skeleton ex. 10px, 0 etc."
        },
        "attribute": "margin-left",
        "reflect": false,
        "defaultValue": "null"
      },
      "animation": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "SkeletonAnimation",
          "resolved": "\"false\" | \"progress\" | \"pulse\"",
          "references": {
            "SkeletonAnimation": {
              "location": "import",
              "path": "./ez-skeleton.constants"
            }
          }
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [{
              "name": "type",
              "text": "{('progress' | 'pulse' | 'false')}"
            }, {
              "name": "memberof",
              "text": "Skeleton"
            }],
          "text": "Animation type"
        },
        "attribute": "animation",
        "reflect": false,
        "defaultValue": "DEFAULT_VALUES.ANIMATION"
      }
    };
  }
}
