import { isDemo } from "@saasquatch/component-boilerplate";
import { withHooks } from "@saasquatch/stencil-hooks";
import { Component, h, Prop } from "@stencil/core";
import deepmerge from "deepmerge";
import { getProps } from "../../utils/utils";
import { NavigationSidebarItemView, } from "./sqm-navigation-sidebar-item-view";
import { useNavigationSidebarItem } from "./useNavigationSidebarItem";
/**
 * @uiName Microsite Sidebar Item
 * @validParents ["sqm-navigation-sidebar"]
 * @exampleGroup Microsite Components
 * @example Sidebar Item - <sqm-navigation-sidebar-item label="Sidebar Item" icon="house"></sqm-navigation-sidebar-item>
 */
export class NavigationSidebarItem {
  constructor() {
    /**
     * @uiName Padding
     * @uiType string
     * @uiEnum ["none", "xxx-small", "xx-small", "x-small", "small", "medium", "large", "x-large", "xx-large", "xxx-large", "xxxx-large"]
     * @uiEnumNames ["None", "XXX-Small", "XX-Small", "X-Small", "Small", "Medium", "Large", "X-Large", "XX-Large", "XXX-Large", "XXXX-Large"]
     */
    this.padding = "x-small";
    withHooks(this);
  }
  disconnectedCallback() { }
  render() {
    const props = isDemo()
      ? useSidebarItemDemo(getProps(this))
      : useNavigationSidebarItem(getProps(this));
    return h(NavigationSidebarItemView, Object.assign({}, props));
  }
  static get is() { return "sqm-navigation-sidebar-item"; }
  static get encapsulation() { return "shadow"; }
  static get properties() { return {
    "path": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Navigation path",
            "name": "uiName"
          }, {
            "text": "pageSelect",
            "name": "uiWidget"
          }],
        "text": ""
      },
      "attribute": "path",
      "reflect": false
    },
    "icon": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Icon",
            "name": "uiName"
          }, {
            "text": "Style",
            "name": "uiGroup"
          }],
        "text": "Options available at https://shoelace.style/components/icon"
      },
      "attribute": "icon",
      "reflect": false
    },
    "label": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Label",
            "name": "uiName"
          }],
        "text": ""
      },
      "attribute": "label",
      "reflect": false
    },
    "backgroundColor": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [{
            "text": "Background Color",
            "name": "uiName"
          }, {
            "text": "color",
            "name": "uiWidget"
          }, {
            "text": "Style",
            "name": "uiGroup"
          }],
        "text": "Background color of the nav item"
      },
      "attribute": "background-color",
      "reflect": false
    },
    "backgroundHoverColor": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [{
            "text": "Background Hover Color",
            "name": "uiName"
          }, {
            "text": "color",
            "name": "uiWidget"
          }, {
            "text": "Style",
            "name": "uiGroup"
          }],
        "text": "Background color of the nav item when hovered"
      },
      "attribute": "background-hover-color",
      "reflect": false
    },
    "backgroundFocusedColor": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [{
            "text": "Background Focused Color",
            "name": "uiName"
          }, {
            "text": "color",
            "name": "uiWidget"
          }, {
            "text": "Style",
            "name": "uiGroup"
          }],
        "text": "Background color of the nav item when focused"
      },
      "attribute": "background-focused-color",
      "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": "color",
            "name": "uiWidget"
          }, {
            "text": "Style",
            "name": "uiGroup"
          }],
        "text": "Text color of the nav item"
      },
      "attribute": "text-color",
      "reflect": false
    },
    "textHoverColor": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [{
            "text": "Text Hover Color",
            "name": "uiName"
          }, {
            "text": "color",
            "name": "uiWidget"
          }, {
            "text": "Style",
            "name": "uiGroup"
          }],
        "text": "Text color of the nav item when hovered"
      },
      "attribute": "text-hover-color",
      "reflect": false
    },
    "textFocusedColor": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [{
            "text": "Text Focused Color",
            "name": "uiName"
          }, {
            "text": "color",
            "name": "uiWidget"
          }, {
            "text": "Style",
            "name": "uiGroup"
          }],
        "text": "Text color of the nav item when items is focused"
      },
      "attribute": "text-focused-color",
      "reflect": false
    },
    "borderRadius": {
      "type": "number",
      "mutable": false,
      "complexType": {
        "original": "number",
        "resolved": "number",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [{
            "text": "Border Radius",
            "name": "uiName"
          }, {
            "text": "Style",
            "name": "uiGroup"
          }],
        "text": "Border radius (in number of pixels)"
      },
      "attribute": "border-radius",
      "reflect": false
    },
    "padding": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "Spacing",
        "resolved": "\"large\" | \"medium\" | \"none\" | \"small\" | \"x-large\" | \"x-small\" | \"xx-large\" | \"xx-small\" | \"xxx-large\" | \"xxx-small\" | \"xxxx-large\"",
        "references": {
          "Spacing": {
            "location": "import",
            "path": "../../global/mixins"
          }
        }
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [{
            "text": "Padding",
            "name": "uiName"
          }, {
            "text": "string",
            "name": "uiType"
          }, {
            "text": "[\"none\", \"xxx-small\", \"xx-small\", \"x-small\", \"small\", \"medium\", \"large\", \"x-large\", \"xx-large\", \"xxx-large\", \"xxxx-large\"]",
            "name": "uiEnum"
          }, {
            "text": "[\"None\", \"XXX-Small\", \"XX-Small\", \"X-Small\", \"Small\", \"Medium\", \"Large\", \"X-Large\", \"XX-Large\", \"XXX-Large\", \"XXXX-Large\"]",
            "name": "uiEnumNames"
          }],
        "text": ""
      },
      "attribute": "padding",
      "reflect": false,
      "defaultValue": "\"x-small\""
    },
    "demoData": {
      "type": "unknown",
      "mutable": false,
      "complexType": {
        "original": "DemoData<NavigationSidebarItemViewProps>",
        "resolved": "{ states?: { active: boolean; }; data?: { label: string; icon: string; path: string; }; textColor?: string; backgroundColor?: string; borderRadius?: number; backgroundHoverColor?: string; textHoverColor?: string; backgroundFocusedColor?: string; textFocusedColor?: string; padding?: string; }",
        "references": {
          "DemoData": {
            "location": "import",
            "path": "../../global/demo"
          },
          "NavigationSidebarItemViewProps": {
            "location": "import",
            "path": "./sqm-navigation-sidebar-item-view"
          }
        }
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [{
            "text": undefined,
            "name": "undocumented"
          }, {
            "text": "object",
            "name": "uiType"
          }],
        "text": ""
      }
    }
  }; }
}
function useSidebarItemDemo(props) {
  return deepmerge({
    states: {
      active: false,
    },
    data: {
      label: props.label || "Dashboard",
      icon: props.icon || "house",
    },
    backgroundColor: props.backgroundColor,
    backgroundHoverColor: props.backgroundHoverColor,
    textColor: props.textColor,
    textHoverColor: props.textHoverColor,
    borderRadius: props.borderRadius,
    backgroundFocusedColor: props.backgroundFocusedColor,
    textFocusedColor: props.textFocusedColor,
    padding: props.padding,
  }, props.demoData || {}, { arrayMerge: (_, a) => a });
}
