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

import { DashboardPage } from '../../_services/apollo.service'

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

@Component({
    selector: 'gisaf-dashboard-page',
    templateUrl: './dashboard-page.component.html',
    styleUrls: ['./dashboard-page.component.css'],
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class DashboardPageComponent implements OnInit {
    page: DashboardPage
    multiPanel: boolean = true
    df_columns: string[]
    // Default expanded panels
    expand: string[] = []

    plotlyConfig = {
        displaylogo: false,
        scrollZoom: true,
        responsive: false,
        toImageButtonOptions: {
            format: 'svg', // one of png, svg, jpeg, webp
            //filename: 'custom_image',
            height: null,
            width: null,
            //scale: 1 // Multiply title/legend/axis/canvas sizes by this factor
        }
    }

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

    ngOnInit() {
        this.route.data.subscribe(
            (data: DashboardPage) => {
                let item = data['item']
                if (item.dfData) {
                    this.df_columns = item.dfData['schema']['fields'].map(f => f.name)
                    item.dfData = item.dfData['data']
                }
                this.page = item
                if (this.page.expandedPanes.length > 0) {
                    this.expand = this.page.expandedPanes
                }
                else {
                    this.expand = expandDefault
                }
                this.cdr.markForCheck()
            }
        )
    }
}
