import { isDemo, useCurrentPage, useProgramId, } from "@saasquatch/component-boilerplate";
import { withHooks } from "@saasquatch/stencil-hooks";
import { useEffect, useState } from "@saasquatch/universal-hooks";
import { Component, h, Prop, State } from "@stencil/core";
import { NavigationSidebarView, } from "./sqm-navigation-sidebar-view";
import deepmerge from "deepmerge";
/**
 * @uiName Microsite Sidebar
 * @validParents ["div","sqm-divided-layout","template","sqm-portal-container","sqm-brand"]
 * @validChildren ["sqm-navigation-sidebar-item"]
 * @slots [{"name":"", "title":"Sidebar Content"}]
 */
export class NavigationSidebar {
  constructor() {
    this.ignored = true;
    /**
     * @uiName Text color
     * @uiWidget color
     * @format color
     * @uiGroup Style
     */
    this.mobileMenuColor = "var(--sqm-text, #444445)";
    withHooks(this);
  }
  disconnectedCallback() { }
  render() {
    const props = isDemo()
      ? useDemoNavigationSidebar(this)
      : useNavigationSidebar(this);
    return (h(NavigationSidebarView, Object.assign({}, props),
      h("slot", null)));
  }
  static get is() { return "sqm-navigation-sidebar"; }
  static get encapsulation() { return "shadow"; }
  static get properties() { return {
    "mobileMenuColor": {
      "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": "color",
            "name": "format"
          }, {
            "text": "Style",
            "name": "uiGroup"
          }],
        "text": ""
      },
      "attribute": "mobile-menu-color",
      "reflect": false,
      "defaultValue": "\"var(--sqm-text, #444445)\""
    },
    "demoData": {
      "type": "unknown",
      "mutable": false,
      "complexType": {
        "original": "DemoData<NavigationSidebarViewProps>",
        "resolved": "{ onClick?: (e: MouseEvent) => void; checked?: boolean; mobileMenuColor?: string; }",
        "references": {
          "DemoData": {
            "location": "import",
            "path": "../../global/demo"
          },
          "NavigationSidebarViewProps": {
            "location": "import",
            "path": "./sqm-navigation-sidebar-view"
          }
        }
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [{
            "text": undefined,
            "name": "undocumented"
          }, {
            "text": "object",
            "name": "uiType"
          }],
        "text": ""
      }
    }
  }; }
  static get states() { return {
    "ignored": {}
  }; }
}
function useNavigationSidebar(props) {
  const location = useCurrentPage();
  const programId = useProgramId();
  const [checked, setChecked] = useState(false);
  // Close hamburger menu after navigation
  useEffect(() => {
    setChecked(false);
  }, [location.pathname, programId]);
  function onClick(e) {
    setChecked(e.target.checked);
  }
  return {
    mobileMenuColor: props.mobileMenuColor,
    checked,
    onClick,
  };
}
function useDemoNavigationSidebar(props) {
  return deepmerge({
    mobileMenuColor: props.mobileMenuColor,
  }, props.demoData || {}, { arrayMerge: (_, a) => a });
}
