import { Component, OnInit } from '@angular/core';
import { DataService } from '../../services/other_api/DataService';
import { ErrorHandlerService } from '../../services/error-handler.service';
import { Item } from '../../models/other_api/Item';
import { FormBuilder, FormGroup } from '@angular/forms';
import { SortDescriptor } from "@progress/kendo-data-query";
import { RemoveEvent, SaveEvent } from '@progress/kendo-angular-grid';
import { AnotherService } from '../../services/other_api/AnotherService';
import { DifferentService } from '../../services/other_api/DifferentService';
import { SomeService } from '../../services/other_api/SomeService';

@Component({
  selector: 'app-client',
  templateUrl: './client.component.html',
  styleUrls: ['./client.component.scss'],
})
export class ClientComponent implements OnInit {
  clients: Item[] = [];
  anotherItems: string[] = [];
  differentItems: string[] = [];
  someItems: string[] = [];
  moreItems: string[] = [];
  parentItems: string[] = [];

  constructor(
    private errorHandlerService: ErrorHandlerService,
    private dataService: DataService,
    private anotherService: AnotherService,
    private differentService: DifferentService,
    private someService: SomeService,
    private formBuilder: FormBuilder,
  ) {
    this.createFormGroup = this.createFormGroup.bind(this);
  }

  public formGroup: FormGroup = this.formBuilder.group({
    Id: 0,
    ClientName: '',
    ClientKey: '',
    ParentClientName: '',
    IsParent: false,
    MarketVertical: '',
    Region: '',
    Inactive: false,
    Locale: ''
  });

  public createFormGroup = (args: any): FormGroup => {
    const item = args.isNew ? new Item(0, '', '', '', '', '', false, false, '') : args.dataItem;

    return this.formBuilder.group({
      Id: item.Id,
      ClientName: item.ClientName,
      ClientKey: item.ClientKey,
      ParentClientName: item.ParentClientName,
      IsParent: item.IsParent || false,
      MarketVertical: item.MarketVertical,
      Region: item.Region,
      Inactive: item.Inactive || false,
      Locale: item.Locale
    });
  };

  public sort: SortDescriptor[] = [
    {
      field: "Name",
      dir: "asc",
    },
  ];

  public sortChange(sort: SortDescriptor[]): void {
    this.sort = sort;
    this.getAllClients();
    this.getAnotherItems();
    this.getDifferentItems();
    this.getSomeItems();
    this.getMoreItems();
    this.getParentItems();
  }

  ngOnInit(): void {
    this.getAllClients();
    this.getAnotherItems();
    this.getDifferentItems();
    this.getSomeItems();
    this.getMoreItems();
    this.getParentItems();
  };

  login() {
    //Implementation for login
  };

  showError() {
    this.errorHandlerService.handleError("This is a test error. Stuff is super wrong.");
  }

  getClient(): void {
    this.dataService.get(1).subscribe();
  }

  getAllClients(): void {
    this.dataService.getAll().subscribe((data) => {
      this.clients = data;
    });
  }

  getAnotherItems(): void {
    this.anotherService.getAll().subscribe((data) => {
      this.anotherItems = data.map((anotherItem) => anotherItem.Name);
    });
  }

  getDifferentItems(): void {
    this.differentService.getAll().subscribe((data) => {
      this.differentItems = data.map((differentItem) => differentItem.Description);
    });
  }

  // Similar functions for other services

  saveHandler(args: SaveEvent): void {
    if (args.isNew) {
      this.dataService.create(args.dataItem).subscribe((createdData) => {
        const updateItem = this.clients.filter(element => element.ClientName === createdData.ClientName)[0];
        updateItem.Id = createdData.Id;
      });
    }
    else {
      this.dataService.update(args.formGroup.value).subscribe((updatedData) => {
        const updateItem = this.clients.filter(element => element.Id === updatedData.Id)[0];
        updateItem.ClientName = updatedData.ClientName;
        updateItem.ClientKey = updatedData.ClientKey;
        // Similar updates for other properties
      });
    }
    args.sender.closeRow(args.rowIndex);
  }

  removeHandler(args: RemoveEvent): void {
    this.dataService.delete(args.dataItem).subscribe();
  }
}

<link rel="stylesheet" href="https://unpkg.com/@progress/kendo-theme-default/dist/all.css" />
<app-page-layout [workingArea]="body" [footer]="footer">
  <ng-template #body>
    <h1>Clients</h1>
    <kendo-grid [kendoGridReactiveEditing]="createFormGroup"
                [kendoGridBinding]="clients"
                [pageable]="true"
                [sortable]="true"
                [navigable]="true"
                [filterable]="true"
                [sort]="sort"
                (sortChange)="sortChange($event)"
                [pageSize]="10"
                (save)="saveHandler($event)"
                (remove)="removeHandler($event)">
      <ng-template kendoGridToolbarTemplate>
        <button kendoGridAddCommand themeColor="success">Add</button>
      </ng-template>
      <kendo-grid-column field="ClientName" title="Client Name"> </kendo-grid-column>


      <kendo-grid-column [filterable]="false" field="ClientKey" title="Client Key">
        <ng-template kendoGridEditTemplate let-dataItem="dataItem">
          <kendo-dropdownlist [data]="clientKeys" [(ngModel)]="dataItem.ClientKey" name="ClientKey"></kendo-dropdownlist>
        </ng-template>
      </kendo-grid-column>

      <!-- Other columns-->

      <kendo-grid-column [filterable]="true" filter="boolean" field="IsParent" title="Is Parent" editor="boolean">
        <ng-template kendoGridCellTemplate let-dataItem="dataItem">

        </ng-template>
      </kendo-grid-column>

      <kendo-grid-column [filterable]="true" filter="boolean" field="Inactive" title="Inactive" editor="boolean">
        <ng-template kendoGridCellTemplate let-dataItem="dataItem">
          <input kendoCheckBox id="InactiveCheckbox" type="checkbox" [checked]="dataItem.Inactive" disabled />
        </ng-template>
      </kendo-grid-column>

      <kendo-grid-command-column title="Actions" [width]="220">
        <ng-template kendoGridCellTemplate let-isNew="isNew">
          <button kendoGridEditCommand themeColor="info">
            Edit
          </button>
          <button kendoGridRemoveCommand themeColor="error">Remove</button>
          <button kendoGridSaveCommand themeColor="success">
            {{ isNew ? "Add" : "Update" }}
          </button>
          <button kendoGridCancelCommand themeColor="warning">
            {{ isNew ? "Discard changes" : "Cancel" }}
          </button>
        </ng-template>
      </kendo-grid-command-column>
    </kendo-grid>
  </ng-template>

  <ng-template #footer>
    <app-custom-button [buttonText]="'Login'" aria-label="Login" (onClick)="login()"></app-custom-button>
    <app-custom-button [buttonText]="'Show Error'" aria-label="Show Error" (onClick)="showError()"></app-custom-button>
  </ng-template>
</app-page-layout>