import { AsyncPipe } from '@angular/common';
import { Component } from '@angular/core';
import { FormBuilder, FormGroup, ReactiveFormsModule } from '@angular/forms';
import { MatButtonModule } from '@angular/material/button';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatIcon } from '@angular/material/icon';
import { MatInputModule } from '@angular/material/input';
import { MatSelectModule } from '@angular/material/select';
import { MatTableDataSource, MatTableModule } from '@angular/material/table';
import { ActivatedRoute, RouterLink } from '@angular/router';
import { Employee, EmployeeService, Qualification, QualificationService } from '@core/ems';
import { map, Observable } from 'rxjs';

@Component({
    selector: 'app-employee-detail',
    imports: [
        AsyncPipe,
        MatIcon,
        RouterLink,
        MatButtonModule,
        MatInputModule,
        MatSelectModule,
        MatTableModule,
        MatFormFieldModule,
        ReactiveFormsModule,
    ],
    templateUrl: './employee-detail.component.html',
    styleUrl: './employee-detail.component.scss'
})
export class EmployeeDetailComponent {
    isNewEmployee: boolean;
    employeeForm: FormGroup;
    skillsDataSource: MatTableDataSource<Qualification> = new MatTableDataSource<Qualification>([]);
    skillsDisplayedColumns = ['skill', 'action'];
    $unusedSkills: Observable<Array<Qualification> | undefined>;

    constructor(
        private route: ActivatedRoute,
        private employeeService: EmployeeService,
        private qualificationService: QualificationService,
        private formBuilder: FormBuilder
    ) {
        const idParam = this.route.snapshot.paramMap.get('id');
        this.isNewEmployee = idParam == null;

        this.employeeForm = this.formBuilder.group<Employee>({
            id: 0,
            firstName: '',
            lastName: '',
            postcode: '',
            city: '',
            street: '',
            phone: '',
            skillSet: []
        });

        this.$unusedSkills = this.qualificationService.getAllQualifications();

        if (this.isNewEmployee) {
            return;
        }

        const id = parseInt(idParam as string);
        this.employeeService.getEmployee({ id }).subscribe((employee) => {
            this.employeeForm = this.formBuilder.group<Employee>(employee);
            this.skillsDataSource = new MatTableDataSource<Qualification>(employee.skillSet);
            this.$unusedSkills = this.qualificationService.getAllQualifications().pipe(
                map((allSkills: Array<Qualification>) => {
                    const usedSkillIds = new Set(employee.skillSet.map(skill => skill.id));
                    return allSkills?.filter(skill => !usedSkillIds.has(skill.id));
                })
            );
        });
    }

    onCreate() {

    }

    onSave() {

    }
}