import { Component, OnInit } from '@angular/core';
import { ServicesComponent } from '../services/services.component';
import { CommonModule } from '@angular/common';
import { Service, WidjetService } from '../services/widjet.service';
import { CdkDragDrop, CdkDrag, CdkDropList, moveItemInArray } from '@angular/cdk/drag-drop';
import { FormsModule } from '@angular/forms';
@Component({
  selector: 'app-layout-widjet-setting',
  templateUrl: './layout-widjet-setting.component.html',
  standalone: true,
  imports: [CommonModule, ServicesComponent, CdkDropList, CdkDrag, FormsModule],
  styleUrls: ['./layout-widjet-setting.component.css']
})
export class LayoutWidjetSettingComponent implements OnInit {
  widgetListConfig: Service[] = []
  widgetList: Service[] = []
  widgetModel?: Service
  appName: string = ""
  constructor(private widjetService: WidjetService) {
    this.widgetList = this.widjetService.widjetList
  }

  ngOnInit() {
  }

  drop(event: CdkDragDrop<string[]>) {
    moveItemInArray(this.widgetListConfig, event.previousIndex, event.currentIndex);
  }

  addWidjet() {
    this.widgetListConfig.push(this.widgetModel!)
  }

  saveLayout() {
    let body = {
      appId: 0,
      appName: this.appName,
      widjet: this.widgetListConfig
    }
    console.log(body)
    this.widjetService.widjetConfig.push(body)
  }

  changeComponent() {
    console.log("changeComponent", this.widgetModel)
  }
}