import{LitElement as t,html as e,css as a}from"lit";import{classMap as s}from"lit/directives/class-map.js";import{ifDefined as l}from"lit/directives/if-defined.js";import{getFlagUrl as o,getInfraProviderLogoUrl as r}from"./lib/remote-assets.js";import{skeletonStyles as i}from"./styles/skeleton.js";import{i18n as n}from"./translation.js";import"./cc-img.js";const c={name:"name",country:"????????????",countryCode:null,lon:0,lat:0,city:"??????????",tags:["????????","????????????"]};class m extends t{static get properties(){return{mode:{type:String,reflect:!0},state:{type:Object}}}constructor(){super(),this.mode="default",this.state={type:"loading"}}static getText(t){const{title:e,subtitle:a,infra:s}=m._getTextParts(t),l=[e,a].filter((t=>null!=t)).join(", ");return null!=s?`${l} (${s})`:l}static _getTextParts(t){const e=t.displayName??t.city,a=null==t.displayName?n("cc-zone.country",{code:t.countryCode,name:t.country}):null,s=t.tags.find((t=>t.startsWith("infra:")));return{title:e,subtitle:a,infra:s?.split(":")[1]??null}}render(){const t="loading"===this.state.type,a="loaded"===this.state.type?this.state:c,{title:i,subtitle:n,infra:d}=m._getTextParts(a);return e`
      <cc-img
        class="flag"
        ?skeleton=${t}
        src=${l(o(a.countryCode))}
        a11y-name=${l(a.countryCode)}
      ></cc-img>
      <div class="wrapper-details-logo">
        <div class="wrapper-details">
          <div class="details">
            <span class="title ${s({skeleton:t})}">${i}</span>
            <span class="subtitle ${s({skeleton:t})}">${n}</span>
          </div>
          ${null!=d?e`
                <cc-img
                  class="infra-logo ${s({skeleton:t})}"
                  src=${r(d)}
                  a11y-name=${d}
                ></cc-img>
              `:""}
        </div>
        <div class="tag-list">${a.tags.map((e=>this._renderTag(e,t)))}</div>
      </div>
    `}_renderTag(t,a){if(t.includes(":")){const[l,o]=t.split(":");return e`
        <span class="tag ${s({skeleton:a})}">
          <span class="tag__category">${l}:</span>
          <span>${o}</span>
        </span>
      `}return e` <span class="tag ${s({skeleton:a})}">${t}</span> `}static get styles(){return[i,a`
        :host {
          --lh: 1.5em;

          display: flex;
        }

        :host([mode='small']),
        :host([mode='small-infra']) {
          --lh: 1em;
        }

        .flag {
          border-radius: var(--cc-border-radius-small, 0.15em);
          box-shadow: 0 0 3px rgb(0 0 0 / 40%);
          display: inline-block;
          height: var(--lh);
          margin-right: 1em;
          width: 2em;
        }

        :host([mode='small']) .flag,
        :host([mode='small-infra']) .flag {
          margin-right: 0.5em;
          width: 1.33em;
        }

        .wrapper-details-logo {
          flex: 1 1 0;
          min-height: var(--lh);
        }

        .wrapper-details {
          align-items: center;
          display: flex;
        }

        .details {
          align-self: center;
          flex: 1 1 0;
          line-height: var(--lh);
        }

        :host([mode='small']) .title,
        :host([mode='small']) .subtitle,
        :host([mode='small-infra']) .title,
        :host([mode='small-infra']) .subtitle {
          font-size: 0.8em;
        }

        .title {
          font-weight: bold;
        }

        .subtitle {
          color: var(--cc-zone-subtitle-color, var(--cc-color-text-weak));
        }

        .infra-logo {
          --cc-img-fit: contain;

          height: var(--lh);
          margin-left: 0.5em;
          width: 4em;
        }

        :host([mode='small']) .tag-list,
        :host([mode='small']) .infra-logo,
        :host([mode='small-infra']) .tag-list {
          display: none;
        }

        .tag-list {
          display: flex;
          flex-wrap: wrap;
          gap: 0.5em;
          margin-top: 0.1em;
        }

        .tag {
          background-color: var(--cc-zone-tag-bgcolor, var(--cc-color-bg-soft, #eee));
          border: 1px solid var(--cc-zone-tag-bdcolor, transparent);
          border-radius: var(--cc-border-radius-default, 0.25em);
          box-sizing: border-box;
          color: var(--cc-zone-tag-textcolor, var(--cc-color-text-default, #000));
          display: flex;
          font-family: var(--cc-zone-tag-font-family, var(--cc-ff-monospace));
          font-size: 0.8em;
          line-height: 1.5;
          padding: var(--cc-zone-tag-padding, 0.1em 0.3em);
        }

        .tag__category {
          font-weight: var(--cc-zone-tag-category-font-weight, normal);
        }

        .skeleton {
          color: transparent !important;
        }

        .skeleton:not(.tag) {
          background-color: #bbb;
        }
      `]}}window.customElements.define("cc-zone",m);export{m as CcZone};
//# sourceMappingURL=cc-zone.js.map
