import { Component, EventEmitter, OnInit, Output } from '@angular/core';
import {
  IonCheckbox,
  IonContent,
  IonHeader,
  IonInput,
  IonItem,
  IonList,
  IonTitle,
  IonToolbar,
  IonCard,
  IonButton,
  IonGrid,
  IonCol,
  IonRow,
  IonToast,
} from '@ionic/angular/standalone';

@Component({
  selector: 'app-todo-edit',
  templateUrl: './todo-edit.component.html',
  styleUrls: ['./todo-edit.component.scss'],
  standalone: true,
  imports: [
    IonHeader,
    IonToolbar,
    IonTitle,
    IonContent,
    IonList,
    IonItem,
    IonCheckbox,
    IonInput,
    IonCard,
    IonButton,
    IonGrid,
    IonCol,
    IonRow,
    IonToast,
  ],
})
export class TodoEditComponent implements OnInit {
  constructor() {}

  ngOnInit() {}

  userInputText: string = '';
  todolist: Array<string> = ['have a good day'];

  userInput(ev: any) {
    this.userInputText = ev.detail.value;
  }
  addTodoList() {
    if (this.userInputText.trim() === '') {
      this.userInputText = '';
    } else {
      this.todolist.push(this.userInputText.trim());
      this.userInputText = '';
      this.todolistChange.emit(this.todolist);
    }
  }
  deleteThisTodolist(todo: string) {
    let idx = this.todolist.findIndex((item) => item === todo);
    this.todolist.splice(idx, 1);
  }

  /**
   * todo-edit 是子组件，父组件是tab1
   * 子组件向父组件发送信息，需要使用@Output()和EventEmitter()
   */
  @Output()
  todolistChange: EventEmitter<Array<string>> = new EventEmitter<
    Array<string>
  >();
}
