import { ChangeDetectorRef, Component, Input } from '@angular/core';

import {
    CdkDrag,
    CdkDragDrop,
    CdkDragPlaceholder,
    CdkDropList,
    CdkDropListGroup,
    moveItemInArray,
    transferArrayItem,
} from '@angular/cdk/drag-drop';

//Modules
import { CommonModule } from '@angular/common';

//Components
import { CaTodoCardComponent } from './components/ca-todo-card.component';

//Models
import { IToDoColumn, ToDoConfig } from './models';

//Enums
import { ColumnName } from './enums';

//Config
import { columnsConfig } from './config';

//Services
import { FileService } from './services';

@Component({
    imports: [
        CommonModule,
        CaTodoCardComponent,
        CdkDropList,
        CdkDrag,
        CdkDropListGroup,
        CdkDragPlaceholder,
    ],
    selector: 'app-ca-todo',
    providers: [FileService],
    templateUrl: './ca-todo-component.html',
    styleUrls: ['./ca-todo-component.scss']
})
export class CaTodoComponent {
    @Input() todoConfigs: ToDoConfig[] = [];
    @Input() inProgressConfigs: ToDoConfig[] = [];
    @Input() completedConfigs: ToDoConfig[] = [];

    public columns: IToDoColumn[] = [];

    constructor(private cdr: ChangeDetectorRef) {}

    ngOnInit() {
        this.initializeColumn();
    }

    public onDrop(event: CdkDragDrop<any[]>): void {
        const previousContainer = event.previousContainer;
        const currentContainer = event.container;

        if (previousContainer === currentContainer) {
            moveItemInArray(
                currentContainer.data,
                event.previousIndex,
                event.currentIndex
            );
        } else {
            transferArrayItem(
                previousContainer.data,
                currentContainer.data,
                event.previousIndex,
                event.currentIndex
            );
        }

        this.updateTodoStates();
    }

    private initializeColumn(): void {
        this.columns = columnsConfig(
            this.todoConfigs,
            this.inProgressConfigs,
            this.completedConfigs
        );
    }

    private updateTodoStates(): void {
        this.todoConfigs = [
            ...(this.columns.find(
                (column) => column.id === ColumnName.REQUESTED
            )?.toDoConfigs || []),
        ];
        this.inProgressConfigs = [
            ...(this.columns.find(
                (column) => column.id === ColumnName.InProgress
            )?.toDoConfigs || []),
        ];
        this.completedConfigs = [
            ...(this.columns.find(
                (column) => column.id === ColumnName.COMPLETED
            )?.toDoConfigs || []),
        ];

        setTimeout(() => {
            this.cdr.detectChanges();
        });
    }
}