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

export class ScheduleChannelGroup extends ValueElement<string | Channel[], {}> {
  className: string = "list-group-item list-group-item-action";

  buildHTML(): string {
    const groupName = Array.isArray(this.value) ? "Open All" : this.value;
    const groupId = Array.isArray(this.value)
      ? this.value.map((item) => `${item.provider}:${item.id}`).join(",")
      : this.value || "";
    return `
    <a href="group/${encodeURIComponent(groupId)}"
      class="d-flex justify-content-between align-items-start text-decoration-none">
      <span>
        <span class="text-primary" style="text-transform: capitalize">${groupName}</span>
      </span>
    </a>`;
  }
}

customElements.define("schedule-channel-group", ScheduleChannelGroup);

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

  getContent(value: Channel): string {
    return `
    <span class="badge me-1 text-bg-secondary">${value.provider}</span>
    <span class="text-primary">${value.name}</span>
    `;
  }
}

export class ScheduleChannelList extends ListElement<Channel, ScheduleChannelItem> {
  childType = ScheduleChannelItem;

  public onRefresh(): void {
    super.onRefresh();
    if (this.value?.length) {
      const groupElement = new ScheduleChannelGroup(this.value);
      this.prepend(groupElement);
    } else {
      this.prepend("Empty");
    }
  }
}

customElements.define("schedule-channel-item", ScheduleChannelItem);
customElements.define("schedule-channel-list", ScheduleChannelList);