import {Component, computed, inject, OnInit, resource, signal} from '@angular/core';
import { RouterOutlet } from '@angular/router';
import {HttpClient} from '@angular/common/http';
import {firstValueFrom} from 'rxjs';

enum LibraryItemType {
  VIDEO = 'VIDEO',
  FOLDER = 'FOLDER'
}

interface LibraryItem {
  id: string;
  name: string;
  type: LibraryItemType
  parentFolder: LibraryItem | null;
}

@Component({
  selector: 'app-root',
  imports: [RouterOutlet],
  templateUrl: './app.html',
  styleUrl: './app.css'
})
export class App implements OnInit {
  #httpClient = inject(HttpClient);

  libraryItems = resource({
    loader: ({}) => firstValueFrom(this.#httpClient.get<LibraryItem[]>('/api/library'))
  });

  activeVideo = signal<LibraryItem | null>(null);

  ngOnInit(): void {
    this.loadLibrary();
  }

  loadLibrary(): void {
    this.libraryItems.reload();
  }
}