import { Component, EventEmitter, Input, Output } from '@angular/core';
import {
    ReactiveFormsModule,
    UntypedFormBuilder,
    UntypedFormGroup,
} from '@angular/forms';

// modules
import { CommonModule } from '@angular/common';
import { AngularSvgIconModule } from 'angular-svg-icon';
import { HttpClientModule } from '@angular/common/http';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

// animations
import { showAnimation } from '../../animations/show.animation';
import { inOutAnimation } from '../../animations/in-out.animation';
import { slideInOut } from '../../animations/slide-in-out.animation';

// pipes
import { CaSvgPipe } from '../../../lib/pipes';
import { LoadStatusColorPipe } from '../../pipes/load-status-color.pipe';

// models
import { TelematicTruckModel } from './models';
import { CaSelectableColumnTableModel } from '../ca-selectable-column-table/models';

// utils
import { CaTelematicListSvgRoutes } from './utils/svg-routes';

// constants
import { CaSelectableColumnTableConstants } from '../ca-selectable-column-table/utils/constants';

// configs
import { ICaInput } from '../ca-input/config';
import { CaTelematicListConfig } from './config/ca-telematic-list.config';

// components
import { ProgressBarComponent } from '../ca-progress-bar/ca-progress-bar.component';
import { CaSelectableColumnTableComponent } from '../ca-selectable-column-table/ca-selectable-column-table.component';
import { CaAppTooltipV2Component } from '../ca-app-tooltip-v2/ca-app-tooltip-v2.component';
import { IsColumnSelectedPipe } from './pipes/is-column-selected.pipe';
import { CaInputComponent } from '../ca-input/ca-input.component';

@Component({
    selector: 'app-ca-telematic-map-list',
    templateUrl: './ca-telematic-map-list.component.html',
    styleUrls: ['./ca-telematic-map-list.component.scss'],
    imports: [
        // modules
        CommonModule,
        AngularSvgIconModule,
        ReactiveFormsModule,
        HttpClientModule,
        NgbModule,
        // pipes
        CaSvgPipe,
        LoadStatusColorPipe,
        IsColumnSelectedPipe,
        CaSvgPipe,
        // components
        CaInputComponent,
        CaSelectableColumnTableComponent,
        CaAppTooltipV2Component,
        ProgressBarComponent,
    ],
    animations: [
        showAnimation('showAnimation'),
        inOutAnimation('inOutAnimation'),
        slideInOut('slideInOut'),
    ]
})
export class CaTelematicMapListComponent {
    @Input() isListActive: boolean = false;
    @Input() trucks: TelematicTruckModel[] = [];
    @Output() newTruckData = new EventEmitter<TelematicTruckModel[]>();

    public searchForm!: UntypedFormGroup;
    public filteredTrucks: TelematicTruckModel[] = [];
    public columnsList: CaSelectableColumnTableModel[] =
        CaSelectableColumnTableConstants.COLUMN_TABLE_ARRAY;

    get telematicSearch(): ICaInput {
        return CaTelematicListConfig.getTelematicSearch();
    }

    constructor(private formBuilder: UntypedFormBuilder) {}

    ngOnInit(): void {
        this.createForm();
        this.filteredTrucks = [...this.trucks];
    }

    public handleShowColumns(data: CaSelectableColumnTableModel[]) {
        this.columnsList = data;
    }

    public getSvgPath(
        propertyName: keyof typeof CaTelematicListSvgRoutes
    ): string {
        return CaTelematicListSvgRoutes[propertyName] as string;
    }

    private createForm(): void {
        this.searchForm = this.formBuilder.group({
            search: null,
        });

        this.searchForm.get('search')?.valueChanges.subscribe((searchTerm) => {
            this.filterTrucks(searchTerm);
        });
    }

    private filterTrucks(searchTerm: string): void {
        if (!searchTerm) {
            this.filteredTrucks = [...this.trucks];
        } else {
            this.filteredTrucks = [
                ...this.trucks.filter((truck) =>
                    truck.driver
                        .toLowerCase()
                        .includes(searchTerm.toLowerCase())
                ),
            ];
        }
    }

    public selectTruck(truck: TelematicTruckModel) {
        truck.isActive = !truck.isActive;
        this.newTruckData.emit(this.filteredTrucks);
    }
}