import{html as e,css as t}from"../../lit/index.js";import{HAXCMSLitElementTheme as i}from"../haxcms-elements/lib/core/HAXCMSLitElementTheme.js";import{store as o}from"../haxcms-elements/lib/core/haxcms-site-store.js";import{autorun as s,toJS as l}from"../../mobx/dist/mobx.esm.js";import{SimpleColorsSuper as a}from"../simple-colors/simple-colors.js";import"./lib/simple-blog-post.js";import"../anchor-behaviors/anchor-behaviors.js";import"../simple-icon/simple-icon.js";import"../simple-icon/lib/simple-icons.js";import"../simple-icon/lib/simple-icon-button.js";import{DDDSuper as n}from"../d-d-d/d-d-d.js";class SimpleBlog extends(a(n(i))){static get styles(){return[super.styles,t`
        html,
        body {
          background-color: #fafafa;
        }
        :host {
          display: block;
          font-family: "Roboto", "Noto", sans-serif;
          -webkit-font-smoothing: antialiased;
          font-size: 14px;
          background-color: #fafafa;
          font-family:
            "Open Sans",
            "MundoSans",
            helvetica neue,
            Arial,
            Helvetica,
            sans-serif;
          margin: 0;
          padding: 0;
          text-rendering: optimizeLegibility;
          -webkit-font-smoothing: antialiased;
          -moz-font-feature-settings: "liga=1, dlig=1";
          -ms-font-feature-settings: "liga", "dlig";
          -webkit-font-feature-settings: "liga", "dlig";
          -o-font-feature-settings: "liga", "dlig";
          font-feature-settings: "liga", "dlig";
        }
        #backbutton {
          position: fixed;
          top: 0px;
          left: 0px;
          padding: 2px;
          width: 40px;
          height: 40px;
          margin: 8px;
          z-index: 1000;
          color: black;
          background-color: rgba(250, 250, 250, 0.5);
          opacity: 0.5;
          border-radius: 50%;
          transition: all 0.6s linear;
        }
        #backbutton:focus,
        #backbutton:hover {
          opacity: 1;
          color: white;
          background-color: var(--haxcms-color, black);
        }
        main,
        main section {
          width: 100vw;
          height: 100vh;
        }
        simple-blog-post {
          transition: all 0.6s ease-in-out;
          visibility: hidden;
        }
        :host([selected-page="0"]) simple-blog-post {
          opacity: 0;
          visibility: hidden;
        }
        :host([selected-page="1"]) simple-blog-post {
          visibility: visible;
          opacity: 1;
        }
        a,
        a:active,
        a:hover,
        a:focus {
          color: inherit;
        }
      `]}static get tag(){return"simple-blog"}render(){return e`
      <main>
        ${0===this.selectedPage?e`
              <section>
                <simple-blog-header></simple-blog-header>
                <simple-blog-listing></simple-blog-listing>
              </section>
            `:e`<section>
              <simple-icon-button
                id="backbutton"
                icon="icons:arrow-back"
                @click="${this._goBack}"
              ></simple-icon-button>
              <simple-tooltip
                for="backbutton"
                position="right"
                offset="14"
                animation-delay="0"
                >Back to listing
              </simple-tooltip>
              <article>
                <simple-blog-post ?edit-mode="${this.editMode}"
                  ><slot></slot
                ></simple-blog-post>
              </article>
              <footer>
                <simple-blog-footer id="footer"></simple-blog-footer>
              </footer>
            </section>`}
      </main>
    `}static get properties(){return{...super.properties,selectedPage:{type:Number,reflect:!0,attribute:"selected-page"}}}constructor(){super(),this.__disposer=[],this.selectedPage=0,setTimeout((()=>{import("./lib/simple-blog-header.js"),import("./lib/simple-blog-footer.js"),import("./lib/simple-blog-listing.js")}),0)}firstUpdated(e){super.firstUpdated&&super.firstUpdated(e),setTimeout((()=>{this.contentContainer=this.shadowRoot.querySelector("simple-blog-post").shadowRoot.querySelector("#contentcontainer")}),0)}connectedCallback(){super.connectedCallback(),s((e=>{this.activeId=l(o.activeId),this.__disposer.push(e)})),s((e=>{let t=l(o.location);this._locationChanged(t),this.__disposer.push(e)}))}disconnectedCallback(){for(var e in this.__disposer)this.__disposer[e].dispose();super.disconnectedCallback()}_locationChanged(e){if(!e||void 0===e.route)return;const t=e.route.name;"home"===t||"404"===t?this.selectedPage=0:(globalThis.scrollTo({top:0,left:0}),this.selectedPage=1,setTimeout((()=>{globalThis.AnchorBehaviors.getTarget(o.themeElement)}),1e3)),setTimeout((()=>{globalThis.dispatchEvent(new Event("resize"))}),50)}_goBack(e){const t=o.activeId;globalThis.history.pushState(null,null,o.location.baseUrl),globalThis.dispatchEvent(new PopStateEvent("popstate")),t?setTimeout((()=>{let e=this.shadowRoot.querySelector("simple-blog-listing").shadowRoot.querySelector('simple-blog-overview[item-id="'+t+'"]');e&&(e.scrollIntoView(!0),e.focus())}),100):globalThis.scrollTo({top:0,left:0});const i=new CustomEvent("json-outline-schema-active-item-changed",{bubbles:!0,cancelable:!0,composed:!0,detail:{}});this.dispatchEvent(i),this.selectedPage=0}}customElements.define(SimpleBlog.tag,SimpleBlog);export{SimpleBlog};