import{html as e,css as i}from"../../../../lit/index.js";import"../../../simple-datetime/simple-datetime.js";import{toJS as t}from"../../../../mobx/dist/mobx.esm.js";import{store as o}from"./AppHaxStore.js";import{SimpleColors as a}from"../../../simple-colors/simple-colors.js";export class AppHaxSiteDetails extends a{static get tag(){return"app-hax-site-details"}constructor(){super(),this.need="all need to succeed",this.details={},this.siteId="",this.detailOps=[{name:"Copy",op:"copySite",icon:"icons:content-copy"},{name:"Download",op:"downloadSite",icon:"file-download"},{name:"Archive",op:"archiveSite",icon:"icons:archive"}],globalThis.HAXCMSContext&&"php"===globalThis.HAXCMSContext&&this.detailOps.push({name:"Git",op:"gitList",icon:"hax:git"})}static get properties(){return{...super.properties,details:{type:Object},siteId:{type:String,attribute:"site-id"}}}static get styles(){return[super.styles,i`
        :host {
          display: flex;
          flex-direction: column;
          justify-content: center;
          font-size: 12px;
          align-items: stretch;
          background-color: var(--simple-colors-default-theme-grey-2);
          height: 208px;
        }

        .flex-container {
          flex: 1;
          background-color: var(--simple-colors-default-theme-grey-2);
          margin: 8px;
          display: flex;
          flex-direction: row;
          justify-content: space-around;
          align-items: center;
        }
        .info-group {
          height: 100%;
          max-width: 25%;
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          align-items: center;
          padding: 0px;
          flex: 1;
        }
        simple-icon-button-lite:active,
        simple-icon-button-lite:hover,
        simple-icon-button-lite:focus {
          background-color: var(--simple-colors-default-theme-grey-4, #eeeeee);
          outline: 2px solid var(--simple-colors-default-theme-grey-12);
          outline-offset: 1px;
        }

        .info-headings {
          font-size: 12px;
        }
        .info-item {
          font-family: "Press Start 2P", sans-serif;
          display: block;
          text-overflow: ellipsis;
          overflow: hidden;
          color: var(--simple-colors-default-theme-grey-12);
          line-height: 12px;
          max-width: 100%;
          font-size: 12px;
        }
        .pre ::slotted(*) {
          padding: 12px;
          overflow: hidden;
          text-overflow: ellipsis;
          max-width: 50%;
          display: inline-flex;
        }
        a {
          text-decoration: underline;
        }
        .info-date {
          color: var(--simple-colors-default-theme-grey-12);
          line-height: 12px;
          font-size: 12px;
        }

        .info-icon {
          --simple-icon-width: 49px;
          --simple-icon-height: 49px;
          --simple-icon-button-border-radius: 0px;
          --simple-icon-button-border: 0px;
          outline: 0;
          border: 2px solid var(--simple-colors-default-theme-grey-12);
          border-radius: 4px;
          padding: 4px;
          width: 80%;
        }
        .info-icon::part(button) {
          outline: none;
        }
        @media (max-width: 640px) {
          :host {
            height: 140px;
          }
          .btn-group button {
            padding: 4px;
            margin: 4px 0;
          }
          .flex-container > div {
            margin: 0px;
          }
          .info-headings {
            font-size: 8px;
          }
          .info-date {
            font-size: 8px;
            line-height: 10px;
          }
          .info-icon {
            --simple-icon-width: 30px;
            --simple-icon-height: 30px;
            padding: 2px;
            border-radius: none;
          }
          .info-item {
            font-size: 8px;
          }
          .flex-container {
            margin: 2px;
          }
          .pre ::slotted(*) {
            padding: 0px;
            margin-top: 8px;
          }
          .info-group {
            height: 24px;
          }
        }
      `]}siteOperation(e){o.appEl.playSound("click");var i=e.target;"DIV"===i.tagName&&(i=i.parentNode);const a=globalThis.document.createElement("div"),s=i.getAttribute("data-site-operation"),n=i.getAttribute("data-site-operation-name"),l=i.getAttribute("data-site");o.activeSiteOp=s,o.activeSiteId=l,import("../../../simple-modal/simple-modal.js").then((()=>{setTimeout((()=>{const e=t(o.manifest.items.filter((e=>e.id===l)).pop());if(a.appendChild(globalThis.document.createTextNode(`Are you sure you want to ${s.replace("Site","")} ${e.metadata.site.name}?`)),"gitList"===s)"php"===globalThis.HAXCMSContext&&globalThis.open(`gitlist/${e.metadata.site.name}`,"_blank","noopener noreferrer");else{const t=globalThis.document.createElement("div"),o=globalThis.document.createElement("button");o.innerText="Confirm",o.classList.add("hax-modal-btn"),o.addEventListener("click",this.confirmOperation.bind(this)),t.appendChild(o);const s=globalThis.document.createElement("button");s.innerText="Cancel",s.classList.add("hax-modal-btn"),s.classList.add("cancel"),s.addEventListener("click",this.cancelOperation.bind(this)),t.appendChild(s),this.dispatchEvent(new CustomEvent("simple-modal-show",{bubbles:!0,cancelable:!0,composed:!0,detail:{title:`${n} ${e.metadata.site.name}?`,elements:{content:a,buttons:t},invokedBy:i,styles:{"--simple-modal-titlebar-background":"orange","--simple-modal-titlebar-color":"black","--simple-modal-width":"30vw","--simple-modal-min-width":"300px","--simple-modal-z-index":"100000000","--simple-modal-height":"20vh","--simple-modal-min-height":"300px","--simple-modal-titlebar-height":"80px"}}}))}}),0)}))}cancelOperation(){o.activeSiteOp="",o.activeSiteId=null,globalThis.dispatchEvent(new CustomEvent("simple-modal-hide")),o.appEl.playSound("error")}async confirmOperation(){const e=t(o.activeSiteOp),i=t(o.activeSite);await o.AppHaxAPI.makeCall(e,{site:{name:i.metadata.site.name,id:i.id}},!0,(()=>{"downloadSite"===t(o.activeSiteOp)?globalThis.open(o.AppHaxAPI.lastResponse.downloadSite.data.link,"_blank"):o.refreshSiteListing()})),globalThis.dispatchEvent(new CustomEvent("simple-modal-hide")),o.appEl.playSound("success"),o.toast(`${i.metadata.site.name} ${e.replace("Site","")} successful!`,3e3,{hat:"random"})}render(){return e`
      <div class="pre"><slot name="pre"></slot></div>
      <div class="flex-container" id="infomation">
          <div class="info-group">
            <div class="info-headings">created</div>
            <simple-datetime
                format="m/j/y"
                .timestamp="${this.details.created}"
                unix
                class="info-date"
            ></simple-datetime>
          </div>
          <div class="info-group">
            <div class="info-headings">updated</div>
            <simple-datetime
                format="m/j/y"
                .timestamp="${this.details.updated}"
                unix
                class="info-date"
            ></simple-datetime>
          </div>
          <div class = info-group>
            <div class="info-headings">pages</div>
            <div class="info-item">${this.details.pages}</div>
          </div>
          <div class = info-group>
            <div class="info-headings">URL</div>
            <a href="${this.details.url}" class="info-item" id="slug">${function makeSlug(e){let i="site";if(e){let t=e.split("sites/");t.length>1&&(i=t.pop().replace("/",""))}return i}(this.details.url)}</a>
          </div>
      </div>
        <div class="flex-container" id="actions">
          ${this.detailOps.map((i=>e`
              <div class="info-group">
                <simple-icon-button-lite
                  data-site="${this.siteId}"
                  data-site-operation="${i.op}"
                  data-site-operation-name="${i.name}"
                  icon="${i.icon}"
                  id="op-${i.op}"
                  class="info-icon"
                  @click=${this.siteOperation}
                >
                  <div class="info-item">${i.name.toLowerCase()}</div>
                </simple-icon-button-lite>
                <simple-tooltip for="op-${i.op}" position="bottom"
                  >${"gitList"!=i.op?"":"View"} ${i.name}
                  ${"gitList"!=i.op?"Site":"source"}</simple-tooltip
                >
              </div>
            `))}
        </div>
      </div>
    `}}customElements.define(AppHaxSiteDetails.tag,AppHaxSiteDetails);