import { Component, h, Prop } from "@stencil/core";
import { withHooks } from "@saasquatch/stencil-hooks";
import { HeroView } from "./sqm-hero-view";
import { getProps } from "../../utils/utils";
/**
 * @uiName Hero Layout
 * @validParents ["sqm-portal-container","sqm-brand","div", "template", "sqb-auth-template-switch", "div","sqm-divided-layout","template","sqm-tab","sqb-program-section","sqb-conditional-section"]
 * @slots [{"name":"","title":"Primary Column Content"},{"name":"secondary-column","title":"Secondary Column Content"}]
 * @example Two Column Hero Layout - <sqm-hero background="https://images.unsplash.com/photo-1599676821464-3555954838dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1939&amp;q=80" min-height="0" columns="2" padding-size="large" wrap-direction="wrap" secondary-background="lightgrey"><h1>Primary Column Content</h1><h1 slot="secondary-column">Secondary Column Content</h1></sqm-hero>
 * @exampleGroup Layout
 */
export class Hero {
  constructor() {
    /**
     *
     * @uiName Columns
     * @uiEnum [1, 2]
     * @uiEnumNames ["One", "Two"]
     */
    this.columns = 1;
    /**
     * Minimum height of each column including when they are stacked on mobile
     *
     * @uiName Minimum height (in px)
     */
    this.minHeight = 200;
    /**
     * @uiName Padding size
     * @uiEnum ["none", "small", "medium","large"]
     * @uiEnumNames ["None", "Small", "Medium", "Large"]
     */
    this.paddingSize = "large";
    /**
     * Flexbox wrap direction, accepts wrap or wrap-reverse
     *
     * @uiName Wrap direction
     * @uiEnum ["wrap", "wrap-reverse"]
     * @uiEnumNames ["Wrap", "Wrap Reverse"]
     */
    this.wrapDirection = "wrap";
    /**
     * Can only be used when two columns are present
     * @uiName Hide the column in mobile view
     * @uiEnum ["primary", "secondary", "null"]
     * @uiEnumNames ["Primary", "Secondary", "None"]
     */
    this.columnToHideInMobile = null;
    withHooks(this);
  }
  disconnectedCallback() { }
  // TODO: Improve empty slot behavior with useChildElements to check for empty slot
  render() {
    const props = {
      states: { ...getProps(this) },
      content: {
        primaryColumn: h("slot", null),
        secondaryColumn: h("slot", { name: "secondary-column" }),
      },
    };
    return h(HeroView, Object.assign({}, props));
  }
  static get is() { return "sqm-hero"; }
  static get encapsulation() { return "shadow"; }
  static get properties() { return {
    "columns": {
      "type": "number",
      "mutable": false,
      "complexType": {
        "original": "1 | 2",
        "resolved": "1 | 2",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Columns",
            "name": "uiName"
          }, {
            "text": "[1, 2]",
            "name": "uiEnum"
          }, {
            "text": "[\"One\", \"Two\"]",
            "name": "uiEnumNames"
          }],
        "text": ""
      },
      "attribute": "columns",
      "reflect": false,
      "defaultValue": "1"
    },
    "minHeight": {
      "type": "number",
      "mutable": false,
      "complexType": {
        "original": "number",
        "resolved": "number",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Minimum height (in px)",
            "name": "uiName"
          }],
        "text": "Minimum height of each column including when they are stacked on mobile"
      },
      "attribute": "min-height",
      "reflect": false,
      "defaultValue": "200"
    },
    "background": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [{
            "text": "Splash image",
            "name": "uiName"
          }, {
            "text": "Background",
            "name": "uiWidget"
          }],
        "text": "Splash image or background color (for use in the left column)"
      },
      "attribute": "background",
      "reflect": false
    },
    "paddingSize": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "\"none\" | \"small\" | \"medium\" | \"large\"",
        "resolved": "\"large\" | \"medium\" | \"none\" | \"small\"",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Padding size",
            "name": "uiName"
          }, {
            "text": "[\"none\", \"small\", \"medium\",\"large\"]",
            "name": "uiEnum"
          }, {
            "text": "[\"None\", \"Small\", \"Medium\", \"Large\"]",
            "name": "uiEnumNames"
          }],
        "text": ""
      },
      "attribute": "padding-size",
      "reflect": false,
      "defaultValue": "\"large\""
    },
    "secondaryBackground": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [{
            "text": "Content background",
            "name": "uiName"
          }, {
            "text": "Background",
            "name": "uiWidget"
          }],
        "text": "Content background color or image (for use in the right column)"
      },
      "attribute": "secondary-background",
      "reflect": false
    },
    "wrapDirection": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "\"wrap\" | \"wrap-reverse\"",
        "resolved": "\"wrap\" | \"wrap-reverse\"",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Wrap direction",
            "name": "uiName"
          }, {
            "text": "[\"wrap\", \"wrap-reverse\"]",
            "name": "uiEnum"
          }, {
            "text": "[\"Wrap\", \"Wrap Reverse\"]",
            "name": "uiEnumNames"
          }],
        "text": "Flexbox wrap direction, accepts wrap or wrap-reverse"
      },
      "attribute": "wrap-direction",
      "reflect": false,
      "defaultValue": "\"wrap\""
    },
    "columnToHideInMobile": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "\"primary\" | \"secondary\" | null",
        "resolved": "\"primary\" | \"secondary\"",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [{
            "text": "Hide the column in mobile view",
            "name": "uiName"
          }, {
            "text": "[\"primary\", \"secondary\", \"null\"]",
            "name": "uiEnum"
          }, {
            "text": "[\"Primary\", \"Secondary\", \"None\"]",
            "name": "uiEnumNames"
          }],
        "text": "Can only be used when two columns are present"
      },
      "attribute": "column-to-hide-in-mobile",
      "reflect": false,
      "defaultValue": "null"
    }
  }; }
}
