import {Component, inject} from '@angular/core';
import {ShowsApiService} from '../../services/shows/shows-api.service';
import {Show} from '../../interfaces/show';
import {ShowsApiResponse} from '../../interfaces/shows-api-response';
import {Toast} from '../../interfaces/toast';
import {ToastService} from '../../services/toast/toast.service';
import {NgbModal, NgbModalRef} from '@ng-bootstrap/ng-bootstrap';
import {CreateEditModalComponent} from '../../components/create-modal/create-edit-modal/create-edit-modal.component';
import {DatePipe} from '@angular/common';
import {DeleteModalComponent} from '../../components/delete-modal/delete-modal.component';
import {ShowsApiDeletion} from '../../interfaces/shows-api-deletion';

@Component({
  selector: 'app-shows',
  imports: [
    DatePipe
  ],
  templateUrl: './shows.component.html',
  styleUrl: './shows.component.css'
})
export class ShowsComponent {
  private api: ShowsApiService = inject(ShowsApiService);
  private toastService: ToastService = inject(ToastService);
  private modalService: NgbModal = inject(NgbModal);

  shows: Show[] = [];
  loading: boolean = true;

  constructor() {
    let loadToast: Toast = {body: "Loading shows..."};
    this.toastService.show(loadToast);
    this.api.getShows().subscribe({
      next: (response: ShowsApiResponse) => {
        this.shows = response.shows;
      }, error: (err: any) => {
        console.error("Error: ", err);
      }, complete: () => {
        let successToast: Toast = {
          body: "Shows have been loaded!",
          htmlClass: "bg-success text-light"
        }
        this.toastService.show(successToast);
        this.loading = false
      }
    })
  }

  createNewShow() {
    this.modalService.open(CreateEditModalComponent).result.then(
      (result: Show) => {
        this.shows.push(result)
      },
      (result) => {
        // Dismissed, do nothing
      }
    )
  }

  deleteShow(show: Show) {
    const modal: NgbModalRef = this.modalService.open(DeleteModalComponent)
    modal.componentInstance.showName = show.title;
    modal.result.then(
      (result) => {
        if (result) {
          if (show._id != null) {
            this.api.deleteShw(show._id).subscribe({
                next: (response: ShowsApiDeletion) => {
                  // Do nothing
                }, error: (err: any) => {
                  console.log(err)
                }, complete: () => {
                  this.toastService.show({body: "Show deleted!"})
                  this.shows = this.shows.filter(((s: Show) => s != show))
                }
              }
            )
          }
        }
      },
      (result) => {
        // Dismissed, do nothing
      }
    )
  }
}