import { ChangeDetectorRef, Component } from '@angular/core';
import { ToastrService } from 'ngx-toastr';
import { EventgrpModel, MyEventgrpModel } from 'src/app/shared/model/eventgrp.model';
import { EventgrpService } from 'src/app/shared/services/eventgrp.service';
import { FileService } from 'src/app/shared/services/file.service';
interface table {
    currentPage: number,
    page: number[],
    search: string
}
@Component({
    selector: 'app-time-attendance',
    templateUrl: './time-attendance.component.html',
    styleUrls: ['./time-attendance.component.scss']
})
export class TimeAttendanceComponent {
    pathTitle = ['การประเมินจัดการประสิทธิภาพ', 'ทะเบียนการประเมินเวลาทำงาน', 'การจัดการหัวข้อการประเมินเวลาทำงาน']

    numDataListChecked = 0
    isDataListChecked = false
    isDataListCheckedAll = false
    currentPage = 1;
    page = Array.from({ length: 1 }, (_, i) => i + 1);
    search = '';
    modalStatus: "add" | "edit" | "delete" | "deleteGroup" = "add"
    modal: table = {
        currentPage: 1,
        page: Array.from({ length: 1 }, (_, i) => i + 1),
        search: ""
    }


    eventgrp: { loading: boolean, selectIndex: number, selectList: EventgrpModel[], dataList: { check: boolean, data: EventgrpModel }[] } = { loading: false, selectIndex: -1, selectList: [new MyEventgrpModel()], dataList: [] }
    constructor(
        private toastr: ToastrService,
        private cdr: ChangeDetectorRef,
        private fileService: FileService,
        private eventgrpService: EventgrpService
    ) { }

    ngOnInit(): void {
        this.getEventgrpList()
    }
    getEventgrpList() {
        this.eventgrp.loading = true
        this.eventgrpService.getList().subscribe({
            next: response => {
                this.eventgrp.dataList = response.map(x => ({ check: false, data: new MyEventgrpModel(x) }))
                this.eventgrp.loading = false
                this.isDataListCheckedAll = false
                this.dataListCheckAll()
                this.searchChange()
                this.cdr.detectChanges();
            }, error: error => {
                this.eventgrp.loading = false
                this.cdr.detectChanges()
            }
        })
    }
    eventgrpListFilter() {
        return this.eventgrp.dataList.filter(x => {
            const data = x.data
            const match = data.eventgrpId.toLowerCase().includes(this.modal.search.toLowerCase()) || data.tdesc.toLowerCase().includes(this.modal.search.toLowerCase()) || data.edesc.toLowerCase().includes(this.modal.search.toLowerCase());
            return match;
        })
    }
    selectEventgrp(data?: EventgrpModel) {
        if (!data) {
            this.eventgrp.selectList.splice(this.eventgrp.selectIndex, 1);
            return;
        }
        this.eventgrp.selectList[this.eventgrp.selectIndex] = new MyEventgrpModel(data);
        if (this.eventgrp.selectIndex === this.eventgrp.selectList.length - 1) {
            this.eventgrp.selectList.push(new MyEventgrpModel());
        }
    }


    dataListFilter() {
        // return this.pmsGrade.dataList.filter((x) => {
        //   const data = x.data
        //   const match = data.gradeId.toLowerCase().includes(this.search.toLowerCase()) || data.tdesc.toLowerCase().includes(this.search.toLowerCase()) || data.edesc.toLowerCase().includes(this.search.toLowerCase());
        //   return match;
        // });
        return []
    }


    dataListCheckAll() {
        // const selectAll = this.isDataListCheckedAll;
        // this.dataListFilter().forEach(x => x.check = selectAll);
        // this.dataListCheck();
    }

    dataListCheck() {
        // const dataCheck = this.dataListFilter();
        // this.isDataListCheckedAll = dataCheck.length ? dataCheck.every(x => x.check) : false;
        // this.numDataListChecked = this.pmsGrade.dataList.filter(x => x.check).length;
        // this.isDataListChecked = Boolean(this.numDataListChecked)
    }

    searchChange() {
        this.currentPage = 1;
        const filteredData = this.dataListFilter();
        this.page = Array.from({ length: Math.ceil(filteredData.length / 10) }, (_, i) => i + 1);
        this.dataListCheck();
    }

    selectData() {

    }

    clearData(modalStatus: string) {
        if (modalStatus == 'add') {
        } else if (modalStatus == 'edit') {
        }
        this.eventgrp.selectList = [new MyEventgrpModel()]
    }

    modalSearchChange(dataList: any) {
        this.modal.currentPage = 1
        this.modal.page = Array.from({ length: Math.ceil(dataList.length / 10) }, (_, i) => i + 1);
    }
}