import {Component} from '@angular/core';
import {Observable} from "rxjs";
import {EmployeeService} from "../../services/employee.service";
import {Employee, EmployeePermission} from "../../../shared/model/employee";
import {takeUntil} from "rxjs/operators";
import {AccountService} from "../../../accounts/services/account.service";
import {animate, state, style, transition, trigger} from "@angular/animations";
import {SubscribingComponent} from "../../../shared/components/subscribing.component";

@Component({
  selector: 'cre-employees',
  templateUrl: './list.component.html',
  styleUrls: ['./list.component.sass'],
  animations: [
    trigger('detailExpand', [
      state('collapsed', style({height: '0px', minHeight: '0'})),
      state('expanded', style({height: '*'})),
      transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)'))
    ])
  ]
})
export class ListComponent extends SubscribingComponent {
  employees$: Observable<Employee[]>
  columns = ['id', 'name', 'group', 'permissionCount', 'lastLogin', 'editButton', 'editPasswordButton']

  expandedElement: Employee | null

  constructor(
    private employeeService: EmployeeService,
    private accountService: AccountService
  ) {
    super()
  }

  ngOnInit(): void {
    this.employees$ = this.employeeService.all.pipe(takeUntil(this.destroy$))
  }

  getDate(dateString: string) {
    return new Date(dateString)
  }

  get canEditEmployee(): boolean {
    return this.accountService.hasPermission(EmployeePermission.EDIT_EMPLOYEE)
  }

  get canEditEmployeePassword(): boolean {
    return this.accountService.hasPermission(EmployeePermission.EDIT_EMPLOYEE_PASSWORD)
  }
}
