import { DatePipe } from '@angular/common';
import { Component, inject, Input, ResourceRef, signal } from '@angular/core';
import {
  FormControl,
  FormGroup,
  ReactiveFormsModule,
  Validators,
} from '@angular/forms';
import { TaskService } from '../service/task-service';

@Component({
  selector: 'app-create-todo',
  imports: [ReactiveFormsModule],
  templateUrl: './create-todo.html',
  styleUrl: './create-todo.css',
})
export class CreateTodo {
  public form!: FormGroup;
  public isEditing = signal(false);
  private datePipe = new DatePipe('en-US');
  private taskService: TaskService = inject(TaskService);

  @Input({ required: true }) tasks!: ResourceRef<any>;
  @Input() editTodo: number = -1;

  ngOnInit() {
    this.form = new FormGroup({
      id: new FormControl(-1),
      title: new FormControl('', Validators.required),
      dueDate: new FormControl(
        this.datePipe.transform(new Date(), 'yyyy-MM-dd'),
      ),
      done: new FormControl(false),
    });
  }

  submit() {
    if (this.form.valid) {
      if (this.form.value.id == -1) {
        this.taskService
          .createTask(this.form.value)
          .then(() => this.tasks.reload());
      } else {
        this.taskService
          .updateTask(this.form.value)
          .then(() => this.tasks.reload());
        this.isEditing.set(false);
      }
      this.form.controls['id'].setValue(-1);
    }
  }

  stopEdit() {
    this.isEditing.set(false);
    this.form.controls['id'].setValue(-1);
  }

  editTask(task: Task) {
    this.form.controls['id'].setValue(task.id);
    this.form.controls['title'].setValue(task.title);
    this.form.controls['dueDate'].setValue(
      this.datePipe.transform(task.dueDate, 'yyyy-MM-dd'),
    );
    this.isEditing.set(true);
  }
}