import { withHooks } from "@saasquatch/stencil-hooks";
import { Component, h, Prop, State } from "@stencil/core";
import { useChildElements } from "../../tables/useChildElements";
/**
 * @uiName Program Timeline
 * @validParents ["sqm-portal-container","div","sqm-divided-layout","sqm-brand","template","sqm-hero","sqm-tab","sqb-program-section","sqb-conditional-section"]
 * @validChildren ["sqm-timeline-entry"]
 * @slots [{"name":"","title":"Timeline","validChildren":["sqm-timeline-entry"]}]
 * @exampleGroup Common Components
 * @example Program Timeline - <sqm-timeline icon="circle"> <sqm-timeline-entry reward="$50" unit="visa giftcard" desc="You refer a friend" icon="circle" > </sqm-timeline-entry> <sqm-timeline-entry reward="$200" unit="visa giftcard" desc="Our sales team qualifies your friend as a good fit for our Enterprise plan" icon="circle" > </sqm-timeline-entry> <sqm-timeline-entry reward="$1000" unit="visa giftcard" desc="Your friend purchases an Enterprise plan" icon="circle" > </sqm-timeline-entry></sqm-timeline>
 */
export class Timeline {
  constructor() {
    this.ignored = true;
    /**
     * @uiName Icon
     * @uiType string
     * @uiEnum ["gift", "circle"]
     * @uiEnumNames ["Gift", "Circle"]
     */
    this.icon = "gift";
    withHooks(this);
  }
  disconnectedCallback() { }
  render() {
    const rewards = useChildElements();
    rewards.forEach((reward) => {
      try {
        reward.setIcon(this.icon);
      }
      catch {
        // incase child is not sqm-timeline-entry
      }
    });
    const vanillaStyle = `
		:host{
			display: block;   
		}

		::slotted(*:not(:only-child):not(:last-child)) {
			margin-bottom: var(--sl-spacing-xx-large);
		}
	`;
    return (h("div", null,
      h("style", { type: "text/css" }, vanillaStyle),
      h("slot", null)));
  }
  static get is() { return "sqm-timeline"; }
  static get encapsulation() { return "shadow"; }
  static get properties() { return {
    "icon": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "\"gift\" | \"circle\"",
        "resolved": "\"circle\" | \"gift\"",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Icon",
            "name": "uiName"
          }, {
            "text": "string",
            "name": "uiType"
          }, {
            "text": "[\"gift\", \"circle\"]",
            "name": "uiEnum"
          }, {
            "text": "[\"Gift\", \"Circle\"]",
            "name": "uiEnumNames"
          }],
        "text": ""
      },
      "attribute": "icon",
      "reflect": false,
      "defaultValue": "\"gift\""
    }
  }; }
  static get states() { return {
    "ignored": {}
  }; }
}
