import{LitElement as e,html as t,css as s}from"lit";import{classMap as o}from"lit/directives/class-map.js";import{createRef as r,ref as i}from"lit/directives/ref.js";import{repeat as a}from"lit/directives/repeat.js";import{ResizeController as n}from"./controllers/resize-controller.js";import{scrollChildIntoParent as l}from"./lib/dom.js";import{PRIVATE_ZONE as c,sortZones as d}from"./lib/zone.js";import{i18n as p}from"./translation.js";import"./cc-map-marker-server.js";import"./cc-map.js";import"./cc-notice.js";import"./cc-zone.js";import{CcSelectEvent as h}from"./components/common.events.js";const m=new Array(6).fill(),u=[600];class _ extends e{static get properties(){return{selected:{type:String},state:{type:Object},_hovered:{type:String,state:!0},_legend:{type:String,state:!0},_points:{type:Array,state:!0},_sortedZones:{type:Array,state:!0}}}constructor(){super(),this.selected=null,this.state={type:"loading"},this._ccMapRef=r(),this._hovered=null,this._legend="",this._points=[],this._sortedZones=null,new n(this,{widthBreakpoints:u})}_getState(e){return this.selected===e?"selected":this._hovered===e?"hovered":"default"}_getZIndexOffset(e){return this.selected===e?200:this._hovered===e?250:0}_onListHover(e){this._hovered=e,this._updatePoints(),this._panMap()}_onMarkerEnter(e){this._hovered=e.detail.name,this._updatePoints(),this._scrollChildIntoParent(this._hovered||this.selected)}_onMarkerLeave(){this._hovered=null,this._updatePoints(),this._scrollChildIntoParent(this._hovered||this.selected)}_onMarkerClick(e){this._onSelect(e.detail.name)}_onSelect(e){this.selected=e,this.dispatchEvent(new h(this.selected))}_panMap(){clearTimeout(this._panMapTimeout),this._panMapTimeout=setTimeout((()=>{if(null!=this._hovered){const e=this._sortedZones.find((e=>e.name===this._hovered));this._ccMapRef.value?.panInside(e.lat,e.lon)}else if(null!=this.selected){const e=this._sortedZones.find((e=>e.name===this.selected));this._ccMapRef.value?.panInside(e.lat,e.lon)}}),200)}_scrollChildIntoParent(e){const t=this.shadowRoot.querySelector(".zone-list-wrapper"),s=this.shadowRoot.querySelector(`input[id=${e}]`);l(t,s)}_updatePoints(){Array.isArray(this._sortedZones)&&(this._points=this._sortedZones.filter((e=>!e.tags.includes(c))).map((e=>({name:e.name,lat:e.lat,lon:e.lon,marker:{tag:"cc-map-marker-server",state:this._getState(e.name),keyboard:!1},tooltip:{tag:"cc-zone",state:{type:"loaded",...e},mode:"small"},zIndexOffset:this._getZIndexOffset(e.name)}))),this._legend=this._sortedZones.some((e=>e.tags.includes(c)))?p("cc-zone-input.private-map-warning"):"")}updated(e){e.has("selected")&&"error"!==this.state.type&&(this._updatePoints(),this._scrollChildIntoParent(this.selected),this._panMap()),e.has("state")&&"loaded"===this.state.type&&this._updatePoints(),super.updated(e)}willUpdate(e){e.has("state")&&"loaded"===this.state.type&&(this._sortedZones=d(this.state.zones))}render(){const e="loading"===this.state.type,s="loaded"===this.state.type?this._sortedZones:m;return"error"===this.state.type?t` <cc-notice intent="warning" message="${p("cc-zone-input.error")}"></cc-notice> `:t`
      <div class="wrapper">
        <cc-map
          view-zoom="1"
          center-lat="35"
          .points=${this._points}
          ?loading=${e}
          @cc-map-marker-click=${this._onMarkerClick}
          @cc-map-marker-enter=${this._onMarkerEnter}
          @cc-map-marker-leave=${this._onMarkerLeave}
          ${i(this._ccMapRef)}
          >${this._legend}
        </cc-map>
        <div class="zone-list-wrapper">
          <div class="zone-list">
            ${a(s,(e=>e?.name??""),(t=>this._renderZoneInput(t,e)))}
          </div>
        </div>
      </div>
    `}_renderZoneInput(e,s){return s?t`
        <div class="zone">
          <div class="label">
            <cc-zone></cc-zone>
          </div>
        </div>
      `:t`
      <div class="zone-choice">
        <input
          type="radio"
          name="zone"
          .value=${e.name}
          id=${e.name}
          .checked=${e.name===this.selected}
          @change=${()=>this._onSelect(e.name)}
        />
        <label
          for=${e.name}
          class="label ${o({hovered:e.name===this._hovered})}"
          @mouseenter=${()=>this._onListHover(e.name)}
          @mouseleave=${()=>this._onListHover()}
        >
          <cc-zone .state=${{type:"loaded",...e}}></cc-zone>
        </label>
      </div>
    `}static get styles(){return[s`
        :host {
          display: block;
        }

        .wrapper {
          background-color: var(--cc-color-bg-default, #fff);
          border: 1px solid var(--cc-color-border-neutral, #aaa);
          border-radius: var(--cc-border-radius-default, 0.25em);
          box-sizing: border-box;
          display: flex;
          height: 100%;
          overflow: hidden;
        }

        cc-map,
        .zone-list-wrapper {
          flex-grow: 1;
        }

        cc-map {
          border-right: 1px solid var(--cc-color-border-neutral, #aaa);
          flex-basis: 0;
          height: 100%;
          width: 100%;
        }

        :host([w-lt-600]) cc-map {
          display: none;
        }

        .zone-list-wrapper {
          box-sizing: border-box;
          height: 100%;
          overflow: auto;
        }

        :host([w-gte-600]) .zone-list-wrapper {
          flex-basis: 24em;
          max-width: 24em;
        }

        .zone-list {
          margin: 0.5em;
        }

        .zone-list:not(:hover):focus-within {
          border-radius: var(--cc-border-radius-default, 0.25em);
          outline: var(--cc-focus-outline, #000 solid 2px);
          outline-offset: var(--cc-focus-outline-offset, 2px);
        }

        .zone-choice {
          display: grid;
          overflow: hidden;
        }

        input,
        .label {
          grid-area: 1 / 1 / 2 / 2;
        }

        input {
          -moz-appearance: none;
          -webkit-appearance: none;
          appearance: none;
          border: 0;
          box-sizing: border-box;
          display: block;
          margin: -0.5em;
          outline: none;
        }

        .label {
          border: 2px solid var(--bd-color, transparent);
          border-radius: var(--cc-border-radius-default, 0.25em);
          box-sizing: border-box;
          display: block;
          padding: 0.5em;
        }

        label {
          cursor: pointer;
        }

        input:checked + .label {
          --bd-color: var(--cc-color-bg-primary-highlight, #000);
        }

        label.hovered,
        input:hover + .label {
          background: var(--cc-color-bg-neutral, #f9f9f9);
        }

        cc-zone {
          width: 100%;
        }
      `]}}window.customElements.define("cc-zone-input",_);export{_ as CcZoneInput};
//# sourceMappingURL=cc-zone-input.js.map
