import { Component, Inject, OnDestroy, OnInit, QueryList, ViewChildren } from '@angular/core';
import { Filter } from '../../interface/filter.interface';
import { MAT_DIALOG_DATA, MatDialog, MatDialogRef } from '@angular/material/dialog';
import { Filter as iconFilter, X as iconClose, ChevronUp as iconChevronUp, ChevronDown as iconChevronDown} from 'lucide-angular';
import { FILTER_TYPE } from '../../enum';
import { FormControl } from '@angular/forms';
import { Group } from '../../interface';
import { Subject, Subscription } from 'rxjs';
import { MatExpansionPanel } from '@angular/material/expansion';
import { SidebarInstance } from '../../interface/sidebar-instance.interface';
import { SidebarDialog } from '../../interface/sidebar-dialog.interface';

@Component({
    selector: 'kit-toolbar-filter-sidebar',
    templateUrl: './toolbar-filter-sidebar.component.html',
})
export class ToolbarFilterSidebarComponent implements OnInit, OnDestroy{
    @ViewChildren(MatExpansionPanel) panels!: QueryList<MatExpansionPanel>;
    private filtersSub!: Subscription;
    public _filters!:Filter[];
    public filterForm!: any;
    public groups!:Group[];
    public filtersCount:number = 0

    public iconFilter = iconFilter;
    public iconClose = iconClose;
    public iconChevronUp = iconChevronUp;
    public iconChevronDown = iconChevronDown;
    
    public FILTER_TYPE = FILTER_TYPE;
    public groupIdPanelOpen:number = 0;

    public filterGroupList:any[]=[]

    public resetFilterFormSubject = new Subject<SidebarInstance>(); 
    public resetFilterForm$ = this.resetFilterFormSubject.asObservable();

    private isFilterGroup:boolean = false
  
    constructor(
        @Inject(MAT_DIALOG_DATA) public data: any,
        public dialogRef: MatDialogRef<ToolbarFilterSidebarComponent>, 
        private dialog: MatDialog
    ) { }

    public set filters(filters:Filter[]){
        this._filters = [...filters]; 
    }

    public get filters(){
        return this._filters;
    }

    public get validForm(){
        return (this.groups && this.groups.length === 0) ? this.validateSimpleForm() : this.validateGroupForm()
    }

    public ngOnInit(): void{
        this.filtersSub = this.data.filters$.subscribe((updatedFilters: Filter[]) => {
            this.filters = [...updatedFilters]; 
        });

        this.filterForm = this.data.filterForm ? this.data.filterForm : this.filterForm
        this.groups = this.data.groups ? this.data.groups : this.groups
        this.filtersCount = this.data.filtersCount ? this.data.filtersCount : this.filtersCount,
        this.groupIdPanelOpen = this.data.groupIdPanelOpen ? this.data.groupIdPanelOpen : this.groupIdPanelOpen

        if(this.groups && this.groups.length > 0 && !this.groupIdPanelOpen){
            this.groupIdPanelOpen = this.groups[0].id
        }

        this.isFilterGroup = this.groups.length > 0
    }

    public ngOnDestroy(): void {
        this.resetFilterFormSubject.complete();
        if (this.filtersSub) {
            this.filtersSub.unsubscribe();
        }
    }

    public getFilter(filterIndex:number){
        return { ...this.filters[filterIndex] };
    }

    public getSingleFilterFormControl(filter:Filter){
        return this.filterForm.get(filter.id) as FormControl;
    }

    public getGroupFilterFormControl(filter:Filter,groupId:number){
        return this.filterForm[groupId].get(filter.id) as FormControl;
    }

    public getFilterWhitValues(){
        let count = 0;
        for (const filter of this.filters) {
            const value = this.filterForm.controls[filter.id].value
            count = (value && value !== '' && !filter.main) ? count+1 : count
        }
        return count
    }

    public setAccordionPanel(index:number){
        if(index >= 0){
            this.groupIdPanelOpen = index
        }else{
            if(!this.panels.some((panel) => panel.expanded)){
                this.groupIdPanelOpen = index
            }
        }        
    }

    public onFilterGroup(groupId:number){
        this.dialogRef.close({groupId});
    }

    public onFilterSingle(){
        this.dialogRef.close({filter: true} as SidebarDialog);
    }

    public onClear(groupId?:number){
        this.filtersCount = 0;
        this.resetFilterFormSubject.next( this.isFilterGroup ? {emitEvent:true,groupId} : {emitEvent:true})
    }

    private validateSimpleForm(){
        const formControlsID = this.filters.reduce((acc:any,filter:any)=> {
            if (!filter.main) {
                acc.push(filter.id);
            }
            return acc; 
        },[])
        return this.validateForm(formControlsID)
    }

    private validateGroupForm(){
        let validate:boolean = false
        if(this.groupIdPanelOpen >= 0){
            const formControlsID = this.filters.reduce((acc:any,filter:any)=> {
                if (filter.group === this.groupIdPanelOpen && !filter.main) {
                    acc.push(filter.id);
                }
                return acc; 
            },[])
            
            validate = this.validateForm(formControlsID,this.groupIdPanelOpen);
        }
        return validate;
    }

    private validateForm(formControlsID:string[],groupId?:number){
        const enabledControls = formControlsID.filter(
            (controlId) => groupId ? !this.filterForm[groupId].controls[controlId].disabled : !this.filterForm.controls[controlId].disabled
        );

        const validControls = enabledControls.filter( controlId => (
            groupId ? this.filterForm[groupId].controls[controlId].valid : this.filterForm.controls[controlId].valid
        ) )  
              
        const emptyControls = enabledControls.filter( controlId => (
            groupId ? !this.filterForm[groupId].controls[controlId].value : !this.filterForm.controls[controlId].value
        ))

        const validation = ( 
            validControls.length ===  enabledControls.length && emptyControls.length < enabledControls.length
        )
        
        return validation
    }

}