import { Component, Element, Event, h, Prop, State } from "@stencil/core";
import * as translation from "./translation";
export class IntergiroPaymentOption {
  componentWillLoad() {
    this.t = translation.create(this.element);
  }
  componentDidLoad() {
    const summary = this.element.getElementsByTagName("summary");
    if (summary.length > 0) {
      const handle = (e) => {
        if (!this.selected)
          this.paymentOptionSelected.emit({ name: this.type, selected: this.selected });
        e.preventDefault();
      };
      summary[0].addEventListener("click", handle);
      summary[0].addEventListener("touch", handle);
    }
  }
  render() {
    const t = this.t;
    return (h("details", { open: this.selected },
      h("summary", null,
        this.selected ? (h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512" },
          h("path", { d: "M256 48C141.6 48 48 141.6 48 256s93.6 208 208 208 208-93.6 208-208S370.4 48 256 48zm-42.7 318.9L106.7 260.3l29.9-29.9 76.8 76.8 162.1-162.1 29.9 29.9-192.1 191.9z" }))) : (h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512" },
          h("path", { d: "M256 48C141.601 48 48 141.601 48 256s93.601 208 208 208 208-93.601 208-208S370.399 48 256 48zm0 374.399c-91.518 0-166.399-74.882-166.399-166.399S164.482 89.6 256 89.6 422.4 164.482 422.4 256 347.518 422.399 256 422.399z" }))),
        t(this.name),
        " ",
        typeof this.brand == "string" ? (h("span", { class: this.brand.toLowerCase() }, this.brand)) : Array.isArray(this.brand) ? (this.brand.map(b => h("span", { class: b.toLowerCase() }, b))) : ([])),
      h("slot", null)));
  }
  static get is() { return "ig-payment-option"; }
  static get encapsulation() { return "scoped"; }
  static get originalStyleUrls() { return {
    "$": ["style.css"]
  }; }
  static get styleUrls() { return {
    "$": ["style.css"]
  }; }
  static get properties() { return {
    "type": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "type",
      "reflect": false
    },
    "name": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "name",
      "reflect": false
    },
    "brand": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string | string[]",
        "resolved": "string | string[] | undefined",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "brand",
      "reflect": false
    },
    "selected": {
      "type": "boolean",
      "mutable": true,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean | undefined",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "selected",
      "reflect": true
    }
  }; }
  static get states() { return {
    "t": {}
  }; }
  static get events() { return [{
      "method": "paymentOptionSelected",
      "name": "paymentOptionSelected",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "complexType": {
        "original": "any",
        "resolved": "any",
        "references": {}
      }
    }]; }
  static get elementRef() { return "element"; }
}
