import { withHooks } from "@saasquatch/stencil-hooks";
import { Component, h, Prop } from "@stencil/core";
import { getProps } from "../../utils/utils";
import { TabsView } from "./sqm-tabs-view";
import { useTabs } from "./useTabs";
/**
 * @uiName Tab Group
 * @validParents ["sqm-portal-container","div","sqm-divided-layout","sqm-brand","template","sqb-program-section","sqb-conditional-section"]
 * @validChildren ["sqm-tab"]
 * @slots [{"name":"", "title":"Tabs","validChildren":["sqm-tab"]}]
 * @exampleGroup Layout
 * @canvasRenderer always-replace
 * @example Generic Tab Group - <sqm-tabs><sqm-tab header="Tab 1"><p>This is the first tab</p></sqm-tab><sqm-tab header="Tab 2"><p>This is the second tab</p></sqm-tab><sqm-tab header="Tab 3"><p>This is the third tab</p></sqm-tab></sqm-tabs>
 */
export class Tabs {
  constructor() {
    withHooks(this);
  }
  disconnectedCallback() { }
  render() {
    const { content } = useTabs();
    const { placement, textColor } = getProps(this);
    return (h(TabsView, { placement: placement, content: content, textColor: textColor },
      h("slot", null)));
  }
  static get is() { return "sqm-tabs"; }
  static get encapsulation() { return "shadow"; }
  static get properties() { return {
    "placement": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "\"left\" | \"right\" | \"bottom\" | \"top\"",
        "resolved": "\"bottom\" | \"left\" | \"right\" | \"top\"",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [{
            "text": "Tabs placement",
            "name": "uiName"
          }, {
            "text": "string",
            "name": "uiType"
          }, {
            "text": "[\"left\", \"right\", \"bottom\", \"top\"]",
            "name": "uiEnum"
          }, {
            "text": "[\"Left\", \"Right\", \"Bottom\", \"Top\"]",
            "name": "uiEnumNames"
          }],
        "text": "Used to specify the placement of the tabs"
      },
      "attribute": "placement",
      "reflect": false
    },
    "textColor": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [{
            "text": "Text color",
            "name": "uiName"
          }, {
            "text": "string",
            "name": "uiType"
          }, {
            "text": "color",
            "name": "uiWidget"
          }],
        "text": "Tab text color"
      },
      "attribute": "text-color",
      "reflect": false
    }
  }; }
}
