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

import { Dashboard } from '../../openapi'
import { CdkTableDataSourceInput } from '@angular/cdk/table'

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: Dashboard = {
        name: '',
        group: '',
        description: '',
    }
    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 => {
                this.page = data['dashboard']
                if (this.page.dfData && this.page.dfData.length > 0) {
                    // this.df_columns = item.dfData['schema']['fields'].map(f => f.name)
                    this.df_columns = Object.keys(this.page.dfData[0])
                }
                if (this.page.expandedPanes?.length > 0) {
                    this.expand = this.page.expandedPanes
                }
                else {
                    this.expand = expandDefault
                }
                this.cdr.markForCheck()
            }
        )
    }

    getTableData(): CdkTableDataSourceInput<object> {
        return this.page.dfData as CdkTableDataSourceInput<object>
    }

    formatCell(value) {
        if (typeof value === 'number') {
            return value.toFixed(1)
        }
        else {
            return value
        }
    }
}
