import { animate, state, style, transition, trigger } from '@angular/animations';
import { Component, EventEmitter, Input,  Output } from '@angular/core';
import { MatPaginatorIntl } from '@angular/material/paginator';
import { Observable, map, startWith } from 'rxjs';
import { AbstractControl, Validators } from '@angular/forms';
import { Options } from './models/options';
import { ColumnDisplay } from './public-api';

@Component({
    selector: 'kit-grid-product',
    templateUrl: './grid-product.component.html',
    animations: [
        trigger('detailExpand', [
            state('collapsed,void', style({height: '0px', minHeight: '0'})),
            state('expanded', style({height: '*'})),
            transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
        ]),
    ]
})
export class GridProductComponent {
    @Input() dataSource: any[] = [];
    @Input() columnsDisplay: ColumnDisplay[] = [];
    @Input() columnsToDisplayCode : string[] = []
    @Input() formTable!: any //form
    @Input() optionsAutocomplete: Array<Options> = [];
    @Input() minDate?: Date | string;
    @Input() maxDate?: Date | string;
    @Input() isMultipleSelect = false
    @Output() changeInputAutoComplete: EventEmitter<null> = new EventEmitter();
    @Output() eventOpenAutocomplete : EventEmitter<unknown> = new EventEmitter();
    public filteredOptions: Observable<Options[]> | undefined;
    constructor(private paginator: MatPaginatorIntl) {
    }

    public cleanNumber(number: number) {
        if (number > 0 && number < 10) {
            return number.toString().replace(/^0+/, '');
        }
        return number;
    }

    public applyColClass(typeCol: string):string | null{
        switch (typeCol) {
            case 'EXTRA_SHORT': return 'col-lg-2 col-md-2 col-sm-12 col-12';
            case 'SHORT': return 'col-lg-4 col-md-4 col-sm-12 col-12';
            case 'MEDIUM': return 'col-lg-6 col-md-6 col-sm-12 col-12';
            case 'LONG': return 'col-lg-12 col-md-12 col-sm-12 col-12';
        }
        return null
    }

    public openAutoComplete(itemRow:any) {
        this.eventOpenAutocomplete.emit(itemRow)
    }

    public inputAutoComplete(formControl: AbstractControl) {
        this.filteredOptions = formControl?.valueChanges.pipe(
            startWith(''),
            map((value: Options) => {
                const label = typeof value === 'string' ? value : value?.label;
                return label ? this._filter(label as string) : this.optionsAutocomplete?.slice();
            }),
        );
        this.changeInputAutoComplete.emit()
    }

    displayFn(option: Options): string {
        return option && option.label ? option.label : '';
    }

    compareWithFn(o1: any, o2: any): boolean {
        return o1 && o2 ? o1.code === o2.code : o1 === o2;
    }

    private _filter(label: string): Options[] {
        const filterValue = label.toLowerCase();

        return this.optionsAutocomplete?.filter(option => option.label.toLowerCase().includes(filterValue)) || [];
    }

    public applyTypeInput(typeControl:string) {
        switch (typeControl) {
            case 'TEXT_INPUT': return 'text';
            case 'NUMERIC_STEPPER': return 'number';
        }
        return 'text'
    }

    isControlRequired(control: AbstractControl | null): boolean {
        if(control && control.validator) {
            return !!control?.hasValidator(Validators.required);
        }
        return false
    }
    
}