import { ListElement, ListItemElement } from "../base/component";
import { Location } from "./model";

export class WheatherLocationItem extends ListItemElement<Location> {
  getHref(value: Location): string {
    return `${value.provider}/${value.id}`;
  }

  getContent(value: Location): string {
    return `
    <span class="badge me-1 text-bg-secondary">${value.provider}</span>
    <span class="fi fi-${value.country_code} me-1"></span>
    <span class="text-primary">${value.name}</span>
    <span class="small ms-1 text-secondary">
      ${value.country}, ${value.district}, ${value.subdistrict}
    </span>
    `;
  }
}

export class WeatherLocationList extends ListElement<Location, WheatherLocationItem> {
  childType = WheatherLocationItem;

  public onRefresh(): void {
    super.onRefresh();
    if (!this.value?.length) {
      this.prepend("Empty");
    }
  }
}

customElements.define("weather-location-item", WheatherLocationItem);
customElements.define("weather-location-list", WeatherLocationList);