import {Component, Input, OnInit} from '@angular/core';
import {TaskService} from "../../../Services/task.service";
import {Task} from "../../../Interfaces/task.interface";
import {ApiService} from "../../../Services/api.service";
import {Router} from "@angular/router";

@Component({
  selector: 'app-leftpanel',
  templateUrl: './leftpanel.component.html',
  styleUrls: ['./leftpanel.component.scss']
})
export class LeftpanelComponent implements OnInit{
  constructor(private taskService: TaskService, private apiService: ApiService, private router: Router) {
  }
  tasks: any[] = [];
  immutableTasks: any[] = []
  filters: string[] = []
  loading: boolean = true;
  today: Date = new Date();
  month: number = this.today.getMonth() + 1;
  year: number = this.today.getFullYear();
  date: number = this.today.getDate()
  currentDate: string = `${this.year}-${this.month}-${this.date}`
  ngOnInit(): void {
    this.taskService.fetchAllTasks()
   this.taskService.taskSubject.subscribe({
     next: (data: any): void=>{
       this.tasks = []
       data.data.forEach((task: any, index: number): void=>{
         task.attributes.color = this.getColor(task.attributes.type)
         this.tasks.push(task.attributes)
         this.tasks[index].id = task.id
       })
       this.loading = false;
       this.immutableTasks = this.tasks
     }
   })
  }

  getColor(type: string): string{
    if(type==="red"){
      return "#c1121f"
    }else if(type==="blue"){
      return "#0466c8"
    }else if(type==="green"){
      return "#1a7431"
    }else if(type==="luck"){
      return "#ffea00"
    }else{
      return "#ff7b00"
    }
  }

  onEdit(index: number): void{
    this.router.navigate(["admin", "edit", index])
  }
  onDelete(index: number): void{
    this.loading = true;
    this.apiService.deleteCard(index).subscribe({
      next: (): void=>{
        this.taskService.fetchAllTasks()
      }
    })
  }

  onSearch(data: any): void{
    this.tasks = this.immutableTasks
    this.tasks = this.tasks.filter((task: Task): boolean=> {
      return task.title.toLowerCase().includes((<HTMLInputElement>data.target).value.toLowerCase());
    });
  }

  showAllTasks(): void{
    this.tasks = this.immutableTasks
  }
  showTodaysTasks(): void{
    const newTasks: Task[] = [];
    this.immutableTasks.filter((task: Task): void=>{
      if(task.date===this.currentDate){
        newTasks.push(task)
      }
    })
    this.tasks = newTasks;
  }

  onFilter(type: string, event?: any): void{
    if(event.target.type){
      let indexOfType: number = this.filters.indexOf(type);

      //Checks if filter is active
      if (indexOfType >= 0) {
        this.filters.splice(indexOfType, 1);
      } else {
        this.filters.push(type);
      }
      console.log(this.filters)
    }

    //Displays filtered todos
    if (this.filters.length === 0) {
      this.tasks = this.immutableTasks
    } else {
      let placeholderArray: Task[] = [];
      this.filters.forEach((filter: string, index: number): void => {
        let taskArray: Task[] = this.immutableTasks
          .filter((task: Task): boolean => {
            return task.type.includes(filter);
          });
        placeholderArray.push(...taskArray);
      });
      this.tasks = placeholderArray;
    }
  }
}