import {Component, EventEmitter, inject, Input, OnInit, Output} from '@angular/core';
import {DateFormatter} from '../../utils/date-formatter';
import {TuiAlertService, TuiButton, TuiGroup, TuiIcon} from '@taiga-ui/core';
import {TuiTextareaModule} from '@taiga-ui/legacy';
import {FormControl, FormGroup, ReactiveFormsModule, Validators} from '@angular/forms';
import {NgIf} from '@angular/common';
import {ModalComponent} from '../modal/modal.component';
import {EditItemComponent} from '../edit-item/edit-item.component';
import {AppointmentService} from '../../services/appointment.service';
import {AppointmentDto} from '../../models/appointment-dto';

@Component({
  selector: 'app-details',
  imports: [
    TuiIcon,
    TuiTextareaModule,
    ReactiveFormsModule,
    NgIf,
    TuiButton,
    TuiGroup,
    ModalComponent,
    EditItemComponent
  ],
  templateUrl: './details.component.html',
  styleUrl: './details.component.scss'
})
export class DetailsComponent implements OnInit {
  private readonly alerts = inject(TuiAlertService);

  ngOnInit(): void {
    if (this.appointment.description) {
      this.testForm.get('testValue1').setValue(this.appointment.description)
    }
  }

  constructor(private appointmentService: AppointmentService) {
  }

  @Input() appointment: AppointmentDto;
  @Output() appointmentDeleted = new EventEmitter<AppointmentDto>();
  @Output() appointmentEdited = new EventEmitter<AppointmentDto>();
  open: boolean = true;
  readonly = true;
  showDeleteModal = false;
  showEditModal = false;

  protected testForm = new FormGroup({
    testValue1: new FormControl('', Validators.required),
    testValue2: new FormControl('This one can be expanded', Validators.required),
    testValue3: new FormControl(
      'This one can be expanded (expandable on focus)',
      Validators.required,
    ),
  });

  deleteAppointment() {
    this.appointmentService.deleteAppointment(this.appointment).subscribe(() => {
        this.showDeleteModal = false;
        this.appointmentDeleted.emit(this.appointment);
      }
    )
  }

  protected readonly DateFormatter = DateFormatter;

  updateAppointment($event: any) {
    this.showEditModal = false;

    this.appointmentService.getAppointment($event).subscribe((appointment: AppointmentDto) => {
      this.appointment = appointment
      this.appointmentEdited.emit(this.appointment);
    })
  }
}