import {Component, inject} from '@angular/core';
import {NgbActiveModal} from '@ng-bootstrap/ng-bootstrap';
import {FormControl, FormGroup, ReactiveFormsModule, Validators} from '@angular/forms';
import {ShowsApiService} from '../../../services/shows/shows-api.service';
import {ShowsApiCreation} from '../../../interfaces/shows-api-creation';
import {ToastService} from '../../../services/toast/toast.service';
import {Show} from '../../../interfaces/show';
import {formatDate} from '@angular/common';
import {ShowsApiDeletionEdit} from '../../../interfaces/shows-api-deletion-edit';

@Component({
  selector: 'app-create-edit-modal',
  imports: [
    ReactiveFormsModule
  ],
  templateUrl: './create-edit-modal.component.html',
  styleUrl: './create-edit-modal.component.css'
})
export class CreateEditModalComponent {
  private activeModal = inject(NgbActiveModal)
  private showsService = inject(ShowsApiService)
  private toastService = inject(ToastService)
  protected newShowForm: FormGroup = new FormGroup({})

  protected editMode: boolean = false
  protected show?: Show

  constructor() {
    this.initForm()
  }

  private initForm() {
    let formattedDate: string
    this.newShowForm = new FormGroup({
      title: new FormControl(this.show?.title, Validators.required),
      seasons: new FormControl(this.show?.seasons, [Validators.required, Validators.min(1)]),
      episodes: new FormControl(this.show?.episodes, [Validators.required, Validators.min(1)]),
      description: new FormControl(this.show?.description, Validators.required)
    })
    if (this.show?.date !== undefined) {
      formattedDate = formatDate(this.show?.date, "YYYY-MM-dd", "en")
    } else {
      formattedDate = ""
    }
    this.newShowForm.addControl("date", new FormControl(formattedDate, Validators.required))
  }

  protected dismiss() {
    this.activeModal.dismiss()
  }

  protected formSubmitted(form: FormGroup) {
    let show: Show = {
      title: form.get("title")?.value,
      date: form.get("date")?.value,
      seasons: form.get("seasons")?.value,
      episodes: form.get("episodes")?.value,
      description: form.get("description")?.value,
      //TODO: Allow user to specify genres
      genres: []
    }


    if (!this.editMode) {
      this.showsService.sendShow(show).subscribe({
        next: (response: ShowsApiCreation) => {
          show._id = response.newId
        }, error: err => {
          this.showToast(true, "created")
          console.error(err)
        }, complete: () => {
          this.showToast(false, "created")
          this.activeModal.close(show)
        }
      })
    } else {
      // The API requires the show to also have an ID, so
      // I add it here
      show._id = this.show?._id
      this.showsService.updateShow(show).subscribe({
        next: (response: ShowsApiDeletionEdit) => {
          // Do nothing
        }, error: err => {
          this.showToast(true, "edited")
          console.error(err)
        }, complete: () => {
          this.showToast(false, "edited")
          this.activeModal.close(show)
        }
      })
    }
  }

  private showToast(error: boolean, action: "edited" | "created") {
    let htmlClass: string = "bg-success text-light"
    let body: string;
    if (error) {
      htmlClass = htmlClass.replace("success", "danger")
      let temp: string
      switch (action) {
        case "created":
          temp = "created"
          break
        case "edited":
          temp = "edit"
          break
      }
      body = `Could not ${temp} show!`
    } else {
      body = `Show ${action} successfully!`
    }
    this.toastService.show({body, htmlClass})
  }
}