import { Component, OnInit, ElementRef, ViewChild } from '@angular/core';
import { SelectableSettings } from '@progress/kendo-angular-grid';
import { GridDataResult, PageChangeEvent, SelectAllCheckboxState } from '@progress/kendo-angular-grid';
import { EHRMessagesAddNewMessageComponent } from 'src/app/ehrmessages-add-new-message/ehrmessages-add-new-message.component';
import {
  DialogService,
  DialogRef,
  DialogCloseResult
} from '@progress/kendo-angular-dialog';

@Component({
  selector: 'app-ehrmessages-main-view',
  templateUrl: './ehrmessages-main-view.component.html',
  styleUrls: ['./ehrmessages-main-view.component.css']
})
export class EHRMessagesMainViewComponent implements OnInit {
  public selectableSettings: SelectableSettings;
  SelectAllClick: boolean;
  spanShowOnSelectAll: any = true;
  public mySelection: number[] = [];
  public gridView: GridDataResult;
  public skip = 0;
  public result;
  @ViewChild('sidebar', { static: false }) sidebar: ElementRef;

  constructor(private dialogService: DialogService) { this.setSelectableSettings(); }

  public gridData: any = [
    {
      ProductID: 1,
      Subject: 'Test,Test - Hello',
      SupplierID: 1,
      CategoryID: 1,
      QuantityPerUnit: '10 boxes x 20 bags',
      Date: 'Mon 08/12/2019 11:36 PM',
      UnitsInStock: 39,
      UnitsOnOrder: 0,
      ReorderLevel: 10,
      Discontinued: false,
      Category: {
        CategoryID: 1,
        CategoryName: 'Beverages',
        Description: 'Soft drinks, coffees, teas, beers, and ales'
      },
      FirstOrderedOn: new Date(1996, 8, 20)
    },
    {
      ProductID: 2,
      Subject: 'lakshmi,Test - Hi, Test Info',
      SupplierID: 1,
      CategoryID: 1,
      QuantityPerUnit: '24 - 12 oz bottles',
      Date: 'Mon 08/22/2019 04:12 PM',
      UnitsInStock: 17,
      UnitsOnOrder: 40,
      ReorderLevel: 25,
      Discontinued: false,
      Category: {
        CategoryID: 1,
        CategoryName: 'Beverages',
        Description: 'Soft drinks, coffees, teas, beers, and ales'
      },
      FirstOrderedOn: new Date(1996, 7, 12)
    },
  ];

  public MessagesLeftmenu: any = [
    {
      MenuID: 1,
      MenuDesc: 'Inbox All (80)',
      iconClass: 'fa fa-inbox',
    },
    {
      MenuID: 2,
      MenuDesc: 'Inbox Priority',
      iconClass: 'fa fa-flag',
    },
    {
      MenuID: 3,
      MenuDesc: 'Drafts',
      iconClass: 'fa fa-pencil-square-o',
    },
    {
      MenuID: 4,
      MenuDesc: 'Sent',
      iconClass: 'fa fa-paper-plane',
    },
    {
      MenuID: 5,
      MenuDesc: 'Deleted',
      iconClass: 'fa fa-trash-o',
    },
    {
      MenuID: 6,
      MenuDesc: 'Done',
      iconClass: 'fa fa-check-square-o',
    },
  ];

  ngOnInit() {
  }

  public setSelectableSettings(): void {
    this.selectableSettings = {
      checkboxOnly: false,
      mode: 'single'
    };
  }

  OnSelectAllCheckedChange() {
    if (this.SelectAllClick === true) {
      this.spanShowOnSelectAll = false;
      for (const item1 of this.gridData) {
        item1.Discontinued = true;
      }
      this.mySelection = this.gridData.map((item) => item.ProductID);
    } else {
      for (const item1 of this.gridData) {
        item1.Discontinued = false;
      }
      this.mySelection = [];
      this.spanShowOnSelectAll = true;
    }
  }

  onSelectedKeysChange() {
    const len = this.mySelection.length;

    if (len === 0) {
      if (this.SelectAllClick === true) {
        this.SelectAllClick = false;
      }
      this.spanShowOnSelectAll = true;
    } else {
      this.spanShowOnSelectAll = false;
    }
  }

  public AddNewMessagePopup() {
    const dialog: DialogRef = this.dialogService.open({
      title: 'New Message',
      content: EHRMessagesAddNewMessageComponent,

      // actions: [
      //   { text: 'Cancel' },
      //   { text: 'OK', primary: true }
      // ],
      width: 1000,
      height: 600,
      minWidth: 250,

    });
    // dialog.content.instance.IsFromAddNew = true;
    dialog.result.subscribe((result) => {
      if (result instanceof DialogCloseResult) {
        console.log('close');
      } else {
        console.log('action', result);
      }

      this.result = JSON.stringify(result);
    });
  }

  OnListClick(curEvent: any) {
    const allElements = this.sidebar.nativeElement.querySelectorAll('[submenuli]');


    allElements.forEach(element => {
      if (element.classList.contains('active')) {
        element.classList.remove('active');
      }
    });

    if (curEvent != null && curEvent.currentTarget != null) {
      curEvent.currentTarget.classList.add('active');
    }
  }

}