import { Component, ViewChild } from '@angular/core';
import {
  NgxDashboardDesignerComponent,
  IDashboardWidgetOption,
  IGridLayOutInstance,
} from 'ngx-dashboard-designer';
import { editLayoutJSON } from '../../data-provider/dashboard-edit.data';
import { <%=classify(name)%>Service } from '../../services/<%=name%>.service';

@Component({
  selector: 'app-<%=name%>-designer',
  templateUrl: './<%=name%>-designer.component.html',
  styleUrls: ['./<%=name%>-designer.component.scss'],
})
export class <%=classify(name)%>DesignerComponent {
 editLayoutJSON: IGridLayOutInstance = editLayoutJSON;
  @ViewChild(NgxDashboardDesignerComponent)
  ngxDashboardDesigner!: NgxDashboardDesignerComponent;
  widgetOptions: IDashboardWidgetOption = {
    mfeWidgetTypes: [
      {
        isMfeWidget: true,
        displayName: 'Bar Chart',
        icon: 'bar-chart',
        description: 'Bar Chart',
        hostUrl:
          'https://linoymalakkaran.github.io/ngx-dashboard-designer-demo/widgetsv13/remoteEntry.js',
        componentName: 'BarchartWidgetComponent',
        type: 'module',
        exposedModule: './BarChartWidget'
      }
    ]
  };

  constructor(private dashboardService: DashboardService) {}

  saveLayout() {
    const layout = this.ngxDashboardDesigner.getDashboardData;
    this.dashboardService.layoutInfo = JSON.parse(JSON.stringify(layout));
    alert(
      'Saved successfully, please click on viewer link to see the preview.'
    );
    console.log(layout);
  }
}