import { __decorate, __metadata } from "tslib";
import { css, html, LitElement } from 'lit';
import { customElement, property, state } from 'lit/decorators.js';
import { getPowerPlantHeaderInfo, getPowerPlantsForHeader } from '../entities/power-plant/queries/query';
import { navigate } from '@operato/shell';
import { getCityWeather, getFineDust } from '../shared/api/queries/weather';
import { arrayToObject, kelvinToCelsius, roundNumber } from '../shared/utils/func/common';
import { OPEN_WEATHER_STATE_ICON, OPEN_WEATHER_STATE_DISPLAY } from '../shared/const/weather';
import { getTodaySmpAndRec } from '../entities/market/queries/query';
import '../features/header-select';
let PowerPlantHeader = class PowerPlantHeader extends LitElement {
    constructor() {
        super(...arguments);
        this.powerPlantId = '';
        this.currentPath = '';
        this.powerPlantHeaderInfo = {};
        this.powerPlantList = [];
        this.todaySmp = {};
        this.weathers = {};
        this.findDust = '';
    }
    static { this.styles = [
        css `
      :host {
        .container-A {
          display: flex;
          justify-content: space-between;
          gap: 15px;
        }
        .container-A div {
          background-color: var(--md-sys-color-secondary);
          border-radius: 7px;
          color: var(--md-sys-color-on-secondary);
        }
        .container-A-1 {
          flex: 4;
        }
        .container-A-2 {
          flex: 5;
          align-content: center;
          font-size: 0.95em;
          text-align: center;
        }
        .container-A-2 span {
          padding-right: 20px;
        }
        .container-A-2 span.red {
          color: #f85864;
        }
        .container-A-2 span.blue {
          color: #59aff8;
        }
        .container-A-2 span.green {
          color: #00d167;
          padding-right: 0;
        }
        .container-A-3 {
          flex: 2;
          align-items: center;

          .weather-icon {
            flex: 1;
            padding-left: var(--padding-wide);

            md-icon {
              --md-icon-size: 30px;
            }
          }
          .weather-icon * {
            vertical-align: middle;
          }
          .weather-temp {
            padding-right: var(--padding-wide);
            font-size: 1.1em;
            font-weight: bold;
          }
        }
        .container-A .content {
          display: flex;
        }
        .shidden {
          display: none;
        }
        /* Mobile Styles */
        @media (max-width: 768px) {
          .shidden {
            display: initial;
          }
          .mhidden {
            display: none !important; /* mobile mode content hidden */
          }
          .container-A {
            flex-direction: column;
            gap: var(--padding-narrow);
          }
          .mobile-weather {
            display: flex;
            flex: 1;

            .weather-icon {
              padding-top: var(--padding-narrow);
              padding-bottom: var(--padding-narrow);
            }
            .weather-icon strong {
              font-size: 1.1em;
            }
            .weather-side {
              padding-right: var(--padding-wide);
              align-self: center;
              text-align: right;
              font-size: 0.9em;

              label {
                color: var(--md-sys-color-surface-tint);
                letter-spacing: -1;
              }
            }
          }
        }
      }
    `
    ]; }
    render() {
        const { weatherId: waetherAddrId } = this.powerPlantHeaderInfo;
        const weather = this.weathers[waetherAddrId]?.weather || {};
        const weatherIcon = OPEN_WEATHER_STATE_ICON[weather.state];
        const weatherText = OPEN_WEATHER_STATE_DISPLAY[weather.state] || '';
        const temp = roundNumber(kelvinToCelsius(weather.temp), 0) || 0;
        // HH:mm 형식으로 변환
        const formatter = new Intl.DateTimeFormat('ko-KR', {
            hour: '2-digit',
            minute: '2-digit',
            hour12: false,
            timeZone: 'UTC'
        });
        const sunriseTime = new Date(weather.sunrise || 0);
        const sunsetTime = new Date(weather.sunset || 0);
        const sunrise = formatter?.format(sunriseTime) || '';
        const sunset = formatter?.format(sunsetTime) || '';
        return html `
      <div class="container-A">
        <div class="container-A-1">
          <header-select
            .selectedItem=${this.powerPlantHeaderInfo}
            .items=${this.powerPlantList}
            @selection-changed=${this.handleSelectionChange}
          ></header-select>
        </div>
        <div class="container-A-2 mhidden">
          오늘 SMP 최고 <span class="red">${this.todaySmp?.HIGH_PRC?.toLocaleString() || 0}원</span> 오늘 SMP 최저
          <span class="blue">${this.todaySmp?.LOW_PRC?.toLocaleString() || 0}원</span> 평균
          <span class="green">${this.todaySmp?.AVG_PRC?.toLocaleString() || 0}원</span>
        </div>
        <div class="container-A-3 content">
          <div class="weather-icon mhidden">
            <md-icon>${weatherIcon}</md-icon>
            ${weatherText}
          </div>
          <div class="weather-temp mhidden">${temp}°</div>
          <div class="mobile-weather shidden">
            <div class="weather-icon">
              <md-icon>${weatherIcon}</md-icon>
              <strong>${temp}</strong>°
            </div>
            <div class="weather-side">
              <label>일출</label>
              <strong>${sunrise || ''}</strong>
              <label>일몰</label>
              <strong>${sunset || ''}</strong>
              <label>풍속</label>
              <strong>${weather.windSpeed || 0}</strong>
              <label>미세</label>
              <strong>${this.findDust || ''}</strong>
            </div>
          </div>
        </div>
      </div>
    `;
    }
    // async firstUpdated() {
    //   this.fetchPowerPlantHeaderInfo()
    // }
    // async updated(changed) {
    //   if (changed.has('powerPlantId')) {
    //     this.fetchPowerPlantHeaderInfo()
    //   }
    // }
    async fetchPowerPlantHeaderInfo() {
        if (this.powerPlantId) {
            const { data: powerPlantHeaderInfo } = (await getPowerPlantHeaderInfo(this.powerPlantId)) || {};
            this.powerPlantHeaderInfo = powerPlantHeaderInfo;
            const { data: powerPlantList } = await getPowerPlantsForHeader(this.powerPlantId);
            this.powerPlantList = powerPlantList;
            const { data: todaySmp } = (await getTodaySmpAndRec()) || {};
            this.todaySmp = todaySmp.todaySmp;
            const weather = (await getCityWeather())?.items || [];
            this.weathers = arrayToObject(weather, 'id');
            const { data: findDust } = (await getFineDust()) || {};
            this.findDust = findDust;
        }
    }
    // 버튼 클릭시 도메인 이동
    handleSelectionChange(event) {
        navigate(`${this.currentPath || 'dashboard'}/${event.detail.id}`);
    }
};
__decorate([
    property({ type: String }),
    __metadata("design:type", String)
], PowerPlantHeader.prototype, "powerPlantId", void 0);
__decorate([
    property({ type: String }),
    __metadata("design:type", String)
], PowerPlantHeader.prototype, "currentPath", void 0);
__decorate([
    state(),
    __metadata("design:type", Object)
], PowerPlantHeader.prototype, "powerPlantHeaderInfo", void 0);
__decorate([
    state(),
    __metadata("design:type", Array)
], PowerPlantHeader.prototype, "powerPlantList", void 0);
__decorate([
    state(),
    __metadata("design:type", Object)
], PowerPlantHeader.prototype, "todaySmp", void 0);
__decorate([
    state(),
    __metadata("design:type", Object)
], PowerPlantHeader.prototype, "weathers", void 0);
__decorate([
    state(),
    __metadata("design:type", String)
], PowerPlantHeader.prototype, "findDust", void 0);
PowerPlantHeader = __decorate([
    customElement('power-plant-header')
], PowerPlantHeader);
export { PowerPlantHeader };
//# sourceMappingURL=power-plant-header.js.map