import { Component, OnInit, Input, ViewChild, ElementRef,
    ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'
import { ActivatedRoute, Params, Router } from '@angular/router'

import { Observable, of } from 'rxjs'
import { map, startWith } from 'rxjs/operators'

import { UntypedFormControl } from '@angular/forms'
import { Dashboard, DashboardSection } from '../../openapi'

const expandDefault = ['attachment', 'plot', 'html']

export class Section {
    constructor(
        public $uri: string,
        public name: string,
    ) {}
}

@Component({
    selector: 'gisaf-dashboard-page-sections',
    templateUrl: './dashboard-page-sections.component.html',
    styleUrls: ['./dashboard-page-sections.component.scss'],
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class DashboardPageSectionsComponent implements OnInit {
    @Input() page: Dashboard
    currentSection: DashboardSection
    myControl: UntypedFormControl = new UntypedFormControl()
    @ViewChild('ipt', { static: true }) ipt: ElementRef
    //sections: Section[] = []
    filteredOptions: Observable<DashboardSection[]>

    constructor(
        protected route: ActivatedRoute,
        protected router: Router,
        private cdr: ChangeDetectorRef,
    ) {}

    ngOnInit() {
        this.route.queryParams.subscribe(
            (params: Params) => {
                let s: DashboardSection[] = this.page.sections.filter(s=>s.name == params['section'])
                if (s.length > 0) {
                    this.select(s[0])
                }
            }
        )
        this.filteredOptions = this.myControl.valueChanges.pipe(
            startWith(''),
            //map(val => this.filter(val)),
            map(
                section => {
                    if (section) {
                        if (typeof section === 'object') {
                            this.router.navigate([], {
                                queryParams: {
                                    section: section['name']
                                },
                                // Prevents server query, as the page has data for all sections
                                queryParamsHandling: 'merge',
                                //relativeTo: this.route
                            })
                            return section['name']
                        }
                        return section
                    }
                }
            ),
            map(
                name => {
                    if (!name || this.page.sections.filter(ri => ri.name === name).length) {
                        return this.page.sections.slice()
                    }
                    if (typeof name === 'string') {
                        return this.filter(name)
                    }
                }
            )
        )
    }

    filter(val: string): DashboardSection[] {
        let filter = val.toLowerCase()
        return this.page.sections.filter(option => {
            return option.name.toLowerCase().indexOf(filter) != -1
        })
    }

    select(section: DashboardSection) {
        this.currentSection = section
        this.cdr.markForCheck()
    }

    displayFn(item: any): string {
        return item ? item.name : item
    }
}