import { Component, input, Input } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MenusModule } from '@progress/kendo-angular-menu';
import { ICON_SETTINGS, SVGIcon } from '@progress/kendo-angular-icons';

@Component({
  selector: 'mnp-menu-item',
  standalone: true,
  imports: [CommonModule, MenusModule],
  providers: [{ provide: ICON_SETTINGS, useValue: { type: 'font', size: 'medium' } }],
  template: `
     <link
      rel="stylesheet"
      href="https://unpkg.com/@progress/kendo-font-icons/dist/index.css"
    />

    <kendo-menu [items]="items"
    >
      <ng-template kendoMenuItemTemplate let-item="item" >
        <span  class='item'>
        <span class="icon-container">
          <ng-container *ngIf="item.icon; else noIcon">
            <span [ngClass]="item.icon" class="k-icon"></span>
          </ng-container>
          <ng-template #noIcon>
            <span class="k-icon empty-icon"></span>
          </ng-template>
        </span>
        {{ item.text }}
        </span>
      </ng-template>
    </kendo-menu>
  `,
    styleUrl: './menu-item.component.scss',
    

})
export class MenuItemComponent {
  @Input() items: MenuItem[] = [];
  @Input() vertical: boolean = false;

}

interface MenuItem {
  text?: string;
  url?: string;
  icon?: string;  // Dynamic icon field
  disabled?: boolean;
  separator?: boolean;
  svgIcon?: SVGIcon;
  cssClass?: string;
  items?: MenuItem[];
}

export class CustomMultiSelectFilterComponent implements AfterViewInit {

  @Output() public handleFilterChange = new EventEmitter<CompositeFilterDescriptor>()

  @Input() public data: string[] = []
  @Input() public textField: string = ""
  @Input() public valueField: string = ""
  @Input() public filter: CompositeFilterDescriptor = { logic: "or", filters: [] }
  @Input() public preFilterValue: string | null = null
  @Input() public filterService: FilterService
  @Input() public currentFilter: CompositeFilterDescriptor = { logic: "or", filters: [] }

  public constructor(
    filterService: FilterService
  ) {
    this.filterService = filterService
  }

  public filterChange(filter: CompositeFilterDescriptor): void {
    this.filter = filter
    this.data = filterBy(this.data , filter)
    this.handleFilterChange.emit(filter)
  }

  public onChange(values: string[], filterService: FilterService): void {
    filterService.filter({
      filters: values.map((value) => ({
        field: this.valueField,
        operator: "contains",
        value,
      })),
      logic: "or",
    })
  }

  public ngAfterViewInit(): void {
    if (this.filterService) {
      this.filterService.changes.subscribe((filter: CompositeFilterDescriptor) => {
        this.currentFilter = filter
        console.log("Current Filters:", this.currentFilter)
      })
    }
  }

}

<kendo-multiselect
  [data]="data"  
  [valuePrimitive]="true"
  [textField]="textField"
  [valueField]="valueField"
  [value]="filter | filterValues"
  (valueChange)="onChange($event, filterService)"
  >
</kendo-multiselect>

<kendo-grid
  kendoGridSelectBy="id"
  [kendoGridBinding]="users"
  filterable="menu"
  [sortable]="true"
  [resizable]="true"
  (selectionChange)="selectionChange($event)"
  [selectable]="selectableSettings"
  [selectedKeys]="[selectedKeyArray]"
  (filterChange)="handleFilterChange($event)"
  [filter]="filter"
>
  <kendo-grid-column-group title="{{ 'literal:Users | Total:' | translate }} {{ users.length }}" [columnMenu]="true">
    <kendo-grid-column field="roles" title="{{ 'literal:Roles' | translate }}" [width]="220" [headerStyle]="{ 'font-weight': 'bold' }">
      <ng-template kendoGridFilterMenuTemplate let-filter="filter" let-filterService="filterService">
        <app-custom-multiselect-filter
          [data]="rolesToFilter"
          textField="rolesToFilter"
          valueField="filterRoles"
          [preFilterValue]="preFilter"
          [filterService]="filterService"
          [currentFilter]="filter"
          >
        </app-custom

import { Component, ViewChild, ElementRef, ViewChildren, QueryList } from '@angular/core';
import { ApptDetail } from '../../interfaces/apptdetail.interface';
import { SchedulerEvent, } from '@progress/kendo-angular-scheduler';
import valueHelpers from '../../shared/value-helpers';
import { ApptService } from '../../interfaces/services/appt.service';
import { GenericPagedResponse } from '../../interfaces/pagedresponse.interface';
import { Client } from '../../interfaces/client.interface';
import { ClientService } from '../../interfaces/services/client.service';
import { ContextMenuComponent, ContextMenuSelectEvent, ContextMenuPopupEvent } from '@progress/kendo-angular-menu';

@Component({
  selector: 'app-appointments',
  templateUrl: './appointments.component.html',
  styleUrls: ['./appointments.component.css']
})
export class AppointmentsComponent {
  public appointments: ApptDetail[] = [];
  selectedDate: Date = new Date();
  public contextMenuEvent!: SchedulerEvent;
  @ViewChild(ContextMenuComponent, { static: true }) apptContextMenu!: ContextMenuComponent;
  @ViewChild('apptScheduler', { read: ElementRef }) apptScheduler!: ElementRef;
  @ViewChildren('apptEvent', { read: ElementRef }) apptEventElements!: QueryList<ElementRef>;

  apptContextMenuItems: any[] = [
    {
      text: "Cashout Appointment",
      value: "cashout"
    },
    {
      text: "Edit",
      value: "edit",
    },
    {
      text: "Delete",
      value: "delete"
    },
    {
      text: "Send SMS Reminder",
      value: "sendSMS"
    },
    {
      text: "Send Email Reminder",
      value: "sendEmailReminder"
    },
  ];


  ngOnInit() {
    this.loadApptData();
  }

  constructor(private apptService: ApptService) { }

  loadApptData() {
    console.log("Load appt data");

    const fromDate = valueHelpers.getStartOfWeek(this.selectedDate);
    const toDate = valueHelpers.getEndOfWeek(this.selectedDate);


    this.apptService.getApptsForCalendar(fromDate, toDate).subscribe((data: GenericPagedResponse<ApptDetail>) => {
      this.appointments = data.data;


      // Update the schedulerEvents array with the new data
      this.updateSchedulerEvents();
    });
  }

  private updateSchedulerEvents() {
    this.schedulerEvents = this.appointments.map(appointment => {

      const startDateTime = new Date(appointment.startDateTime); // Convert to Date object
      const endDateTime = new Date(appointment.endDateTime); // Convert to Date object


      return {
        id: appointment.apptDetailId.toString(),
        start: startDateTime,
        end: endDateTime,
        title: appointment.clientName + ' <br> ' + appointment.itemName,
        description: appointment.apptNote,       
        resourceId: appointment.employeeId
      };
    });
  }

  public schedulerEvents: SchedulerEvent[] = [];

  onDateChange(event: any) {
    console.log(event);
    if (this.selectedDate != event.selectedDate)
      this.selectedDate = event.selectedDate;
    console.log('Selected Date:', this.selectedDate);
    this.loadApptData();
  }


  public onApptContextMenuSelect(e: ContextMenuSelectEvent): void {
    if (e.item.value == "edit") {

    }
    else if (e.item.value == "delete") {

    }
    else if (e.item.value == "cashout") {

    }
    else if (e.item.value == "sendSMS") {

    }
    else if (e.item.value == "sendEmailReminder") {

    }

  }
  public onEventContextMenu(event: any): void {
    this.contextMenuEvent = event; // Save the event for later use

    const targetElement = event.target;

    // Get the unique identifier from the custom attribute
   // const apptId = targetElement.getAttribute('data-appt-id');

    // Find the corresponding 'apptEvent' element based on the 'data-appt-id' attribute

   // console.log(apptId)
    
    if (targetElement) {

      
      this.apptContextMenu.show(targetElement);
    }

    event.preventDefault();
  }

}

<kendo-scheduler [events]="schedulerEvents" (dateChange)="onDateChange($event)" [selectedDate]="selectedDate"
                 (contextmenu)="onEventContextMenu($event)" #apptScheduler>

  <kendo-scheduler-week-view> </kendo-scheduler-week-view>

</kendo-scheduler>


<kendo-contextmenu #apptContextMenu [items]="apptContextMenuItems"  (select)="onApptContextMenuSelect($event)">

</kendo-contextmenu>