/**
 * Copyright 2019 The Pennsylvania State University
 * @license Apache-2.0, see License.md for full text.
 */
import{html as e,PolymerElement as t}from"../../../../../@polymer/polymer/polymer-element.js";import{Router as o}from"../../../../../@vaadin/router/dist/vaadin-router.js";import{microTask as a}from"../../../../../@polymer/polymer/lib/utils/async.js";import{afterNextRender as i}from"../../../../../@polymer/polymer/lib/utils/render-status.js";import{encapScript as r,findTagsInHTML as n,wipeSlot as l,varExists as p}from"../../../../utils/utils.js";import"../../../../../@polymer/app-layout/app-header/app-header.js";import"../../../../../@polymer/app-layout/app-toolbar/app-toolbar.js";import"../../../../../@polymer/app-layout/app-drawer/app-drawer.js";import"../../../../../@polymer/app-layout/app-drawer-layout/app-drawer-layout.js";import"../../../../../@polymer/app-layout/app-header-layout/app-header-layout.js";import"../../../../../@polymer/iron-ajax/iron-ajax.js";import"../../../../simple-colors/lib/simple-colors-polymer.js";import"../../../../map-menu/map-menu.js";class HAXCMSLegacyPlayer extends t{static get tag(){return"haxcms-legacy-player"}static get properties(){return{file:{type:String,observer:"_fileChanged"},activeItemContent:{type:String,notify:!0,observer:"_activeItemContentChanged"},activeItemLocation:{type:String,computed:"computeActiveItemLocation(activeItem, __ready)",observer:"_activeItemLocationChanged"},activeItem:{type:Object},manifest:{type:Object},__ready:{type:Boolean,value:!1},routerManifest:{type:Object,computed:"computeRouterManifest(manifest)",observer:"_updateRouter"}}}_activeItemLocationChanged(e){e&&this.shadowRoot.querySelector("#activecontent").generateRequest()}_fileChanged(e,t){void 0!==e&&this.shadowRoot.querySelector("#manifest").generateRequest()}static get template(){return e`
      <style include="simple-colors-shared-styles-polymer">
        :host {
          display: block;
          font-family: libre baskerville;
          position: relative;
          overflow: hidden;
          --outline-player-min-height: 100vh;
          --app-drawer-width: 300px;
          --outline-player-dark: #222222;
          --outline-player-light: #f8f8f8;
          background-color: var(--outline-player-light);
        }

        :host([closed]) {
          --app-drawer-width: 0px;
        }

        h1 {
          font-size: 48px;
          line-height: 16px;
        }

        h2 {
          font-size: 32px;
        }

        h3 {
          font-size: 28px;
        }

        p {
          line-height: 26px;
          min-height: 26px;
        }

        a,
        a:visited,
        a:active {
          color: #000;
        }

        a:hover {
          color: #2196f3;
        }

        ul li {
          padding-bottom: 24px;
          line-height: 1.5;
          color: #424242;
          max-width: 448px;
        }

        ul li:last-child {
          padding-bottom: 16px;
        }

        app-drawer-layout {
          min-height: 100vh;
          min-height: -moz-available; /* WebKit-based browsers will ignore this. */
          min-height: -webkit-fill-available; /* Mozilla-based browsers will ignore this. */
          min-height: fill-available;
          /* if the user has set a specific value then override the defaults */
          min-height: var(--outline-player-min-height);
        }

        .outline-title {
          font-size: 24px;
          font-weight: normal;
          line-height: 32px;
          vertical-align: middle;
          padding: 16px;
          height: 32px;
          margin: 0;
          text-align: center;
          text-overflow: ellipsis;
          overflow: hidden;
          word-break: break-word;
          border-bottom: 1px solid #eeeeee;
          position: sticky;
        }

        site-menu {
          padding: 8px;
        }

        outline-player-navigation {
          --outline-player-dark: var(--outline-player-dark);
        }

        div[main-title] {
          margin-left: 16px;
          font-size: 20px;
          line-height: 20px;
          overflow-wrap: break-word;
          text-overflow: ellipsis;
          display: inline-block;
          word-break: break-word;
        }

        paper-progress {
          display: block;
          width: 100%;
          --paper-progress-active-color: rgba(255, 255, 255, 0.5);
          --paper-progress-container-color: transparent;
        }

        app-header {
          color: var(--outline-player-dark);
          /* Enable outline to be placed anywhere in the dom */
          /* This will override the app-header-layout forcing fixed mode */
          /*position: absolute !important;
        left: 0 !important;*/
          --app-header-background-rear-layer: {
            /* app-header-layout will force fixed */
            background-color: var(--outline-player-light);
          }
        }

        app-toolbar {
          border-bottom: none;
          background-color: #ffffff;
          box-shadow: 0 0 6px -3px var(--outline-player-dark);
        }
        app-drawer {
          box-shadow: 0 0 6px -3px var(--outline-player-dark);
          overflow: hidden;
          --app-drawer-scrim-background: rgba(80, 80, 80, 0.8);
          --app-drawer-content-container: {
            overflow: hidden;
            background-color: var(--outline-player-light);
          }
        }
        app-drawer-layout[narrow] app-toolbar {
          position: fixed !important;
          left: 0;
          right: 0;
        }
        app-drawer-layout[narrow] #contentcontainer {
          padding-top: 64px;
        }
        #content {
          justify-content: center;
          padding: 8px 8px 8px 8px;
        }

        #content > * {
          display: flex;
          flex-direction: column;
          align-items: center;
        }

        /* Required for HAX */
        :host([edit-mode]) #slot {
          display: none !important;
        }
        :host([edit-mode]) #content {
          padding: 32px 8px 8px 8px;
        }
        #contentcontainer {
          max-width: 840px;
          margin: 0 auto;
          padding: 0 16px 16px 16px;
          flex: 1 1 auto;
          order: 1;
          display: flex;
        }
        #contentcontainer > * {
          flex: 1 1 auto;
          display: flex;
          flex-direction: column;
          width: 100%;
        }
        #contentcontainer h-a-x {
          margin: 0;
        }
        site-menu {
          height: calc(100vh - 64px);
          color: #000000;
          padding: 0;
          background-color: #ffffff;
          --site-menu-active-color: rgba(0, 0, 0, 0.1);
          --site-menu-scrolltrack-bg-color: rgba(0, 0, 0, 0.3);
          --site-menu-bg-shadow: rgba(0, 0, 0, 0.3);
          --site-menu-bg-color: #fafafa;
          --site-menu: {
            padding: 0;
            background-color: #ffffff;
            color: #000000;
          }
          --site-menu-container: {
            padding: 0;
            background-color: #ffffff;
            color: #000000;
          }
          --site-menu-item-active-item-color: #000000;
        }
        site-menu-button {
          --site-menu-button-button: {
            border-radius: 50%;
            background-color: rgba(0, 0, 0, 0.1);
            height: 40px;
            width: 40px;
          }
          --site-menu-button-button-hover: {
            background-color: rgba(0, 0, 0, 0.2);
          }
        }
      </style>
      <iron-ajax
        id="manifest"
        url="[[outlineLocation]][[file]]"
        handle-as="json"
        debounce-duration="250"
        last-response="{{manifest}}"
      ></iron-ajax>
      <iron-ajax
        id="activecontent"
        url="[[outlineLocation]][[activeItemLocation]]"
        handle-as="text"
        loading="{{loading}}"
        debounce-duration="250"
        last-response="{{activeItemContent}}"
      ></iron-ajax>
      <!-- Begin Layout -->
      <app-drawer-layout narrow="{{narrow}}">
        <app-drawer id="drawer" swipe-open slot="drawer" opened="{{opened}}">
          <h2 class="outline-title">[[manifest.title]]</h2>
          <map-menu
            id="menu"
            selected="[[activeItem.id]]"
            manifest="[[routerManifest]]"
            active-indicator
            auto-scroll
          ></map-menu>
        </app-drawer>
        <app-header-layout>
          <app-header slot="header" reveals>
            <app-toolbar>
              <div main-title>
                [[activeItem.title]]
                <div id="slotTitle"><slot name="title"></slot></div>
              </div>
              <site-menu-button
                type="prev"
                position="bottom"
                label="Prev"
                raised
              ></site-menu-button>
              <site-menu-button
                type="next"
                position="bottom"
                label="Next"
                raised
              ></site-menu-button>
              <site-print-button></site-print-button>
            </app-toolbar>
          </app-header>
          <div id="content">
            <div id="contentcontainer">
              <div id="slot"><slot></slot></div>
            </div>
          </div>
        </app-header-layout>
      </app-drawer-layout>
    `}constructor(){super();let e={};this.baseURI&&(e.baseUrl=this.baseURI),this.router=new o(this,e),window.addEventListener("vaadin-router-location-changed",this._routerLocationChanged.bind(this))}pathFromUrl(e){return e.substring(0,e.lastIndexOf("/")+1)}_activeItemContentChanged(e,t){if(e){var o=e;if(null!==o&&(l(this,"*"),o=r(e),a.run(()=>{setTimeout(()=>{let e=document.createRange().createContextualFragment(o);this.appendChild(e);new CustomEvent("json-outline-schema-active-body-changed",{bubbles:!0,composed:!0,cancelable:!1,detail:{html:o}})},5)}),p(this.manifest,"metadata.node.dynamicElementLoader"))){let e=n(o);const t=this.pathFromUrl(decodeURIComponent(import.meta.url));for(var i in e){const o=e[i];this.manifest.metadata.node.dynamicElementLoader[o]&&!window.customElements.get(o)&&import(`${t}../../../../../${this.manifest.metadata.node.dynamicElementLoader[o]}`).then(e=>{}).catch(e=>{console.log(e)})}}}}ready(){super.ready(),document.getElementById("haxcmsoutdatedfallbacksuperold")&&document.getElementById("haxcmsoutdatedfallback").removeChild(document.getElementById("haxcmsoutdatedfallbacksuperold"))}connectedCallback(){super.connectedCallback(),i(this,(function(){this.__ready=!0}))}disconnectedCallback(){window.removeEventListener("vaadin-router-location-changed",this._routerLocationChanged.bind(this)),super.disconnectedCallback()}computeActiveItemLocation(e,t){if(e&&e.location)return"pages/"+e.location+"/index.html"}computeRouterManifest(e){if(document.body.dispatchEvent(new CustomEvent("json-outline-schema-changed",{bubbles:!0,detail:e})),e&&void 0!==e.items){const t=e.items.map(e=>{let t=e.location.replace("pages/","").replace("/index.html","");return Object.assign({},e,{location:t})});return Object.assign({},e,{items:t})}}_updateRouter(e){if(!e||void 0===e.items)return;const t=e.items.map(e=>({path:e.location,name:e.id,component:`fake-${e.id}-e`}));this.router.setRoutes([...t,{path:"/",component:"fake-home-e",name:"home"},{path:"/(.*)",component:"fake-404-e",name:"404"}])}_routerLocationChanged(e){setTimeout(()=>{if(this.routerManifest.items.find){var t=this.routerManifest.items.find(t=>t.location==e.detail.location.route.path);t&&this.set("activeItem",t)}},100)}}window.customElements.define(HAXCMSLegacyPlayer.tag,HAXCMSLegacyPlayer);export{HAXCMSLegacyPlayer};