import { Component, Prop, h, Watch, Element, Event } from '@stencil/core';
import { getAnimation, setDefaultAnimation } from '../../../functions/animation-registry';
import { animateTo, shimKeyframesHeightAuto, stopAnimations } from '../../../functions/animate';
import { isRtl } from '../../../functions/page-align';
export class ScToggle {
  constructor() {
    /** Indicates whether or not the details is open. You can use this in lieu of the show/hide methods. */
    this.open = false;
    /** Disables the details so it can't be toggled. */
    this.disabled = false;
    /** Is this a borderless toggle? */
    this.borderless = false;
    /** Is this a shady */
    this.shady = false;
    /** Should we show a radio control?  */
    this.showControl = false;
    /** Should we show the arrow icon? */
    this.showIcon = true;
    /** Are these collapsible? */
    this.collapsible = true;
  }
  componentDidLoad() {
    this.body.hidden = !this.open;
    this.body.style.height = this.open ? 'auto' : '0';
  }
  /** Shows the details. */
  async show() {
    if (this.open || this.disabled) {
      return undefined;
    }
    this.open = true;
  }
  /** Hides the details */
  async hide() {
    if (!this.open || this.disabled || !this.collapsible) {
      return undefined;
    }
    this.open = false;
  }
  handleSummaryClick() {
    if (!this.disabled) {
      if (this.open) {
        this.hide();
      }
      else {
        this.show();
      }
      this.header.focus();
    }
  }
  handleSummaryKeyDown(event) {
    if (event.key === 'Enter' || event.key === ' ') {
      event.preventDefault();
      if (this.open) {
        this.hide();
      }
      else {
        this.show();
      }
    }
    if (event.key === 'ArrowUp' || event.key === 'ArrowLeft') {
      event.preventDefault();
      this.hide();
    }
    if (event.key === 'ArrowDown' || event.key === 'ArrowRight') {
      event.preventDefault();
      this.show();
    }
  }
  async handleOpenChange() {
    if (this.open) {
      this.scShow.emit();
      await stopAnimations(this.body);
      this.body.hidden = false;
      this.body.style.overflow = 'hidden';
      const { keyframes, options } = getAnimation(this.el, 'details.show');
      await animateTo(this.body, shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);
      this.body.style.height = 'auto';
      this.body.style.overflow = 'visible';
    }
    else {
      this.scHide.emit();
      await stopAnimations(this.body);
      this.body.style.overflow = 'hidden';
      const { keyframes, options } = getAnimation(this.el, 'details.hide');
      await animateTo(this.body, shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);
      this.body.hidden = true;
      this.body.style.height = 'auto';
      this.body.style.overflow = 'visible';
    }
  }
  render() {
    return (h("div", { part: "base", class: {
        'details': true,
        'details--open': this.open,
        'details--disabled': this.disabled,
        'details--borderless': this.borderless,
        'details--shady': this.shady,
        'details--is-rtl': isRtl(),
      } },
      h("header", { ref: el => (this.header = el), part: "header", id: "header", class: "details__header", role: "button", "aria-expanded": this.open ? 'true' : 'false', "aria-controls": "content", "aria-disabled": this.disabled ? 'true' : 'false', tabindex: this.disabled ? '-1' : '0', onClick: () => this.handleSummaryClick(), onKeyDown: e => this.handleSummaryKeyDown(e) },
        this.showControl && (h("span", { part: "radio", class: "details__radio" },
          h("svg", { viewBox: "0 0 16 16" },
            h("g", { stroke: "none", "stroke-width": "1", fill: "none", "fill-rule": "evenodd" },
              h("g", { fill: "currentColor" },
                h("circle", { cx: "8", cy: "8", r: "3.42857143" })))))),
        h("div", { part: "summary", class: "details__summary" },
          h("slot", { name: "summary" }, this.summary)),
        this.showIcon && (h("span", { part: "summary-icon", class: "details__summary-icon" },
          h("slot", { name: "icon" },
            h("sc-icon", { name: "chevron-right" }))))),
      h("div", { class: "details__body", ref: el => (this.body = el) },
        h("div", { part: "content", id: "content", class: "details__content", role: "region", "aria-labelledby": "header" },
          h("slot", null)))));
  }
  static get is() { return "sc-toggle"; }
  static get encapsulation() { return "shadow"; }
  static get originalStyleUrls() { return {
    "$": ["sc-toggle.scss"]
  }; }
  static get styleUrls() { return {
    "$": ["sc-toggle.css"]
  }; }
  static get properties() { return {
    "open": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Indicates whether or not the details is open. You can use this in lieu of the show/hide methods."
      },
      "attribute": "open",
      "reflect": true,
      "defaultValue": "false"
    },
    "summary": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "The summary to show in the details header. If you need to display HTML, use the `summary` slot instead."
      },
      "attribute": "summary",
      "reflect": false
    },
    "disabled": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Disables the details so it can't be toggled."
      },
      "attribute": "disabled",
      "reflect": true,
      "defaultValue": "false"
    },
    "borderless": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Is this a borderless toggle?"
      },
      "attribute": "borderless",
      "reflect": true,
      "defaultValue": "false"
    },
    "shady": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Is this a shady"
      },
      "attribute": "shady",
      "reflect": true,
      "defaultValue": "false"
    },
    "showControl": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Should we show a radio control?"
      },
      "attribute": "show-control",
      "reflect": false,
      "defaultValue": "false"
    },
    "showIcon": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Should we show the arrow icon?"
      },
      "attribute": "show-icon",
      "reflect": false,
      "defaultValue": "true"
    },
    "collapsible": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Are these collapsible?"
      },
      "attribute": "collapsible",
      "reflect": false,
      "defaultValue": "true"
    }
  }; }
  static get events() { return [{
      "method": "scShow",
      "name": "scShow",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": "Show the toggle"
      },
      "complexType": {
        "original": "void",
        "resolved": "void",
        "references": {}
      }
    }, {
      "method": "scHide",
      "name": "scHide",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": "Show the toggle"
      },
      "complexType": {
        "original": "void",
        "resolved": "void",
        "references": {}
      }
    }]; }
  static get elementRef() { return "el"; }
  static get watchers() { return [{
      "propName": "open",
      "methodName": "handleOpenChange"
    }]; }
}
setDefaultAnimation('details.show', {
  keyframes: [
    { height: '0', opacity: '0' },
    { height: 'auto', opacity: '1' },
  ],
  options: { duration: 250, easing: 'ease' },
});
setDefaultAnimation('details.hide', {
  keyframes: [
    { height: 'auto', opacity: '1' },
    { height: '0', opacity: '0' },
  ],
  options: { duration: 250, easing: 'ease' },
});
