/* COPYRIGHT Esri - https://js.arcgis.com/1.2/LICENSE.txt */
import { c as customElement } from "../../chunks/runtime.js";
import { u as useT9n } from "../../chunks/useT9n.js";
import { LitElement, createEvent, safeStyleMap } from "@arcgis/lumina";
import { useContextConsumer } from "@arcgis/lumina/context";
import { css, html, svg } from "lit";
import { c as configContext, i as isMobileContext } from "../../chunks/deployAppContexts.js";
import { createRef, ref } from "lit/directives/ref.js";
const styles = css`/** @license
 * Copyright 2025 Esri
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *    http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

calcite-shell-panel {
  z-index: var(--calcite-z-index-1);
}

.position-relative {
  position: relative;
}

.display-flex {
  display: flex;
}

.flex-1 {
  flex: 1;
}

.flex-grow {
  flex: 1;
  /* This allows the label to grow and take up available space */
}

.flex-shrink-0 {
  flex: 0 0 auto;
  /* This prevents the label from growing and allows it to take only the space it needs */
}

.leader-1 {
  margin-top: var(--calcite-spacing-xxl);
}

.trailer-1 {
  margin-bottom: var(--calcite-spacing-xxl);
}

.warning-text {
  max-width: 35em;
  margin-left: auto;
  margin-right: auto;
  font-size: var(--calcite-font-size-md);
}

.text-center {
  text-align: center;
}

.border-override {
  border-top-width: var(--calcite-border-width-none);
  border-bottom-width: var(--calcite-border-width-none);
}

.header-override {
  --calcite-panel-header-content-space: var(--calcite-spacing-none);
  --calcite-panel-header-background-color: var(--calcite-color-foreground-2);
}

.panel-override {
  --calcite-panel-background-color: var(--calcite-color-foreground-2);
  --calcite-panel-border-color: none;
}

.label-override {
  --calcite-label-margin-bottom: var(--calcite-spacing-none);
  padding-inline-start: var(--calcite-spacing-base);
  font-weight: var(--calcite-font-weight-medium);
}

.header-button-padding {
  padding-top: var(--calcite-spacing-sm);
  padding-bottom: var(--calcite-spacing-sm);
  padding-inline-start: var(--calcite-spacing-lg);
  padding-inline-end: var(--calcite-spacing-lg);
}

.padding-start {
  padding-inline-start: var(--calcite-spacing-lg);
}

.align-items-center {
  align-items: center;
}

.justify-content-end {
  justify-content: end;
}

.filter-width-350 {
  --calcite-shell-panel-width: 350px;
}

.z-index-2 {
  z-index: 2;
}

.mock-fab {
  --calcite-fab-shadow-internal: 0 6px 20px -4px rgba(0, 0, 0, .1), 0 4px 12px -2px rgba(0, 0, 0, .08);
  box-shadow: var(--calcite-fab-shadow, var(--calcite-fab-shadow-internal));
  --calcite-button-background-color: var(--calcite-fab-background-color);
  --calcite-button-border-color: var(--calcite-fab-border-color);
  --calcite-button-text-color: var(--calcite-fab-text-color);
  --calcite-button-loader-color: var(--calcite-fab-loader-color);
}

.position-relative {
  position: relative;
}

.height-100 {
  height: 100%;
}

.height-50 {
  height: 50px;
}

.sign-in-prompt {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

.sign-in-icon {
  transform: translateX(-20px)
}

.height-150 {
  height: 150px;
}

.width-150 {
  width: 150px;
}

.padding-top-3 {
  padding-top: 3px;
}`;
class SolutionsDeployedShell extends LitElement {
  constructor() {
    super(...arguments);
    this.solutionsCount = 0;
    this.filterOpen = true;
    this.filters = [];
    this.isMobile = false;
    this._translations = useT9n({ name: "solutions-deployed-shell", blocking: true });
    this._configContextConsumer = useContextConsumer({
      context: configContext,
      subscribe: true
    });
    this._isMobileContextConsumer = useContextConsumer({
      context: isMobileContext,
      subscribe: true,
      callback: (value) => this.isMobile = value
    });
    this._solutionsDeployedFilterPanel = createRef();
    this._solutionsDeployedPanelRef = createRef();
    this.filterRemoved = createEvent();
    this.tokenRefreshed = createEvent();
    this._handleSignIn = () => {
      const signInParam = window.location.pathname.endsWith("deployments") ? "" : "deployments";
      this._configContextConsumer.value?.authentication?.signIn(signInParam);
    };
  }
  static {
    this.properties = { solutionsCount: [9, {}, { type: Number }], filterOpen: [16, {}, { state: true }], filters: [16, {}, { state: true }], isMobile: [16, {}, { state: true }], _translations: [16, {}, { state: true }] };
  }
  static {
    this.styles = styles;
  }
  willUpdate(changes) {
    if (changes.has("isMobile")) {
      this.filterOpen = !this.isMobile;
    }
  }
  async searchSolutions(searchOptions) {
    this._solutionsDeployedPanelRef.value?.setSearchOptions(searchOptions);
    if ("owner" in searchOptions) {
      const isOrg = searchOptions.owner === "organization";
      this._solutionsDeployedFilterPanel.value.changeOwnerFilter(!isOrg, true);
    } else if ("sortType" in searchOptions || "searchTerm" in searchOptions) {
      this._solutionsDeployedPanelRef.value?.searchSolutions(searchOptions);
    }
  }
  async load() {
    if (this._isMobileContextConsumer.value) {
      this.isMobile = this._isMobileContextConsumer.value;
    }
  }
  render() {
    if (!this._configContextConsumer.value?.authentication?.IsSignedIn) {
      return this._getSignInPrompt();
    }
    const solutionsCountStyle = this.isMobile ? "justify-content-end" : "";
    return html`<calcite-shell class="position-relative"><calcite-panel class="border-override header-override panel-override z-index-1"><div class=${`display-flex align-items-center height-50 ${solutionsCountStyle}`} slot=header-content><calcite-label class="label-override flex-shrink-0 padding-top-3" layout=inline>${this._translations.numberOfDeployments?.replace("{{count}}", this.solutionsCount.toString())}</calcite-label></div>${this._getSolutionsAllPanel()}</calcite-panel></calcite-shell>`;
  }
  _getSignInPrompt() {
    return html`<div class="sign-in-prompt">${this._getSignInIcon()}<div class="text-center leader-1 warning-text trailer-1">${this._translations.signInMessage}</div><calcite-button appearance=outline @click=${this._handleSignIn} scale=l>${this._translations.signIn}</calcite-button></div>`;
  }
  _getSolutionsAllPanel() {
    const solutionsAllPanelOverride = this.isMobile && this.filterOpen ? { "display": "none" } : "";
    return html`<solutions-deployed-panel @deployedCardsFetched=${this._updateSolutionCount} @searchTermSet=${(evt) => this._solutionsDeployedFilterPanel.value.changeSearchFilter(evt.detail.searchTerm, false)} style=${safeStyleMap(solutionsAllPanelOverride)} ${ref(this._solutionsDeployedPanelRef)}></solutions-deployed-panel>`;
  }
  _updateSolutionCount(evt) {
    this.solutionsCount = evt.detail;
  }
  _getSignInIcon() {
    return html`<div class="sign-in-icon"><svg viewBox="0 0 64 64" width=200 height=200 xmlns=http://www.w3.org/2000/svg>${svg`<path d="M56.9 4.1V60h-.8V4.9H23.3l25.6 7.47v39.26l-28.8 8.4V35h.8v23.97l27.2-7.94V12.97L20.9 5.03V30h-.8V4.1h36.8zM30.735 41.7l.565.566 9.766-9.766-9.766-9.766-.565.567 8.799 8.799H5v.8h34.534l-8.8 8.8z" fill=var(--calcite-color-text-3) />`}</svg></div>`;
  }
}
customElement("solutions-deployed-shell", SolutionsDeployedShell);
export {
  SolutionsDeployedShell
};
