import { Component, ElementRef, EventEmitter, OnInit, Output, ViewChild } from '@angular/core';
import { DashrunnerService } from '../dashrunner.service';
import { DashboardContentModel } from 'src/app/models/builder/dashboard';
import { ActivatedRoute, Router } from '@angular/router';
import { Dashboard3Service } from 'src/app/services/builder/dashboard3.service';
// Add FilterService import
import { FilterService } from '../../../dashboardnew/common-filter/filter.service';
// Add Subscription import
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-todo-runner',
  templateUrl: './todo-runner.component.html',
  styleUrls: ['./todo-runner.component.scss']
})
export class TodoRunnerComponent implements OnInit {
  @ViewChild('contentContainer') contentContainerRef!: ElementRef;
  @Output() buttonClicked = new EventEmitter<void>();
  
  // Add subscriptions to unsubscribe on destroy
  private subscriptions: Subscription[] = [];

  loading = false;
  givendata;
  error;
  XAxis;
  YAxis;

  editId;
  public DashtestboardArray: DashboardContentModel[] = [];
  workflowLine;
  TableName;
  ConnectionId: number; // Add ConnectionId property

  list;
  data: any;
  todo: string = '';
  // todoList = ['todo 1'];
  todoList = {
    listName: "title123",
    List:['todo 1','todo 2'],
  }
  
  constructor( private Dashtestservive:DashrunnerService,private route: ActivatedRoute,private dashboardService: Dashboard3Service,
    private router : Router,
    // Add FilterService to constructor
    private filterService: FilterService) { }

  ngOnInit(): void {
    this.editId = this.route.snapshot.params.id;
    console.log(this.editId);
    // this.getbyId();

    // Subscribe to filter changes
    this.subscriptions.push(
      this.filterService.filterState$.subscribe(filters => {
        // When filters change, refresh the todo data
        this.fetchTodoData();
      })
    );

    this.dashboardService.getById(this.editId).subscribe((data)=>{
      console.log(data);
      this.workflowLine = data.dashbord1_Line[0].model;
      const dash = JSON.parse(this.workflowLine) ;
      // this.DashtestboardArray = dash.dashboard;
      // console.log(this.DashtestboardArray);

      const ChartObject = dash.dashboard.filter(obj => obj.name === "To Do Chart");
      console.log(ChartObject);
      for (let i = 0; i < ChartObject.length; i++) {
        const ids = this.Dashtestservive.gettodo();
        // console.log(ids);
        if (ids.includes(ChartObject[i].chartid)) {
          // If the chartid is already in the ids array, continue to the next iteration
          continue;
        }
        this.Dashtestservive.settodo(ChartObject[i].chartid);
        const id = ids[i];
        console.log(id);
      
        if (ChartObject[i].chartid === id) {
          this.TableName = ChartObject[i].table;
          this.XAxis = ChartObject[i].xAxis;
          this.YAxis = ChartObject[i].yAxis;
          this.ConnectionId = ChartObject[i].connection; // Add connection ID
          console.log(this.TableName);
          // Fetch data with filters
          this.fetchTodoData();
          break; // No need to continue the loop once the correct placeholder is found
        }
      }
    });
  }





  public addTodo(todo: string) {
    this.todoList.List.push(todo);
    this.todo = ''; // Clear the input field after adding a todo
}

public removeTodo(todoIx: number) {
    if (this.todoList.List.length) {
        this.todoList.List.splice(todoIx, 1);
    }
}

generatePDFFile(){
  this.buttonClicked.emit();
  const content = this.contentContainerRef.nativeElement;
  const filename = 'Todolist.pdf'; // You can provide any desired filename here

  this.Dashtestservive.generatePDF(content, filename);
}

// Fetch todo data with filter support
fetchTodoData(): void {
  if (this.TableName && this.XAxis && this.YAxis) {
    // Get filter parameters from common filters
    const commonFilters = this.filterService.getFilterValues();
    
    // Build filter object using field names as keys
    const filterObj = {};
    Object.keys(commonFilters).forEach(filterId => {
      const filterValue = commonFilters[filterId];
      
      // Find the filter definition to get the field name
      const filterDef = this.filterService.getFilters().find(f => f.id === filterId);
      
      if (filterDef && filterDef.field) {
        const fieldName = filterDef.field;
        if (filterValue !== undefined && filterValue !== null && filterValue !== '') {
          filterObj[fieldName] = filterValue;
        }
      }
    });
    
    // Convert to JSON string for API call
    let filterParams = '';
    if (Object.keys(filterObj).length > 0) {
      filterParams = JSON.stringify(filterObj);
    }
    
    console.log('TodoRunner: Final filter object to send to API:', filterObj);
    
    // Fetch data from the dashboard service with filters
    this.Dashtestservive.getChartDataWithFilters(this.TableName, "Todo List", this.XAxis, this.YAxis, this.ConnectionId, '', '', filterParams).subscribe((Ldata) => {
      console.log(Ldata);
      this.todoList.listName = Ldata.listName;
      this.todoList.List = Ldata.List;
    },(error) => {
      console.log(error);
    });
  }
}

ngOnDestroy() {
  // Unsubscribe from all subscriptions to prevent memory leaks
  console.log('TodoRunnerComponent ngOnDestroy called, unsubscribing from', this.subscriptions.length, 'subscriptions');
  this.subscriptions.forEach(subscription => {
    if (subscription && !subscription.closed) {
      subscription.unsubscribe();
    }
  });
  this.subscriptions = [];
  
  console.log('TodoRunnerComponent destroyed and cleaned up');
}
}