import { CatalogRoleTagComponent } from '@/shared/catalog/roles';
import {
  IColumn,
  PageDataListComponent,
} from '@/shared/components/pageDataList/page-data-list.component';
import { Component, signal, TemplateRef, ViewChild } from '@angular/core';
import { UserFormComponent } from '../components/form.component';
import { IUserResponse } from '../models';
import { UsersService } from '../services/main.service';

@Component({
  selector: 'app-users',
  templateUrl: './list.component.html',
  imports: [PageDataListComponent, UserFormComponent, CatalogRoleTagComponent],
})
export class UsersComponent {
  constructor(private userService: UsersService) {
    this.getData();
  }
  @ViewChild('role', { static: true }) roleTpl!: TemplateRef<any>;

  columns = [
    { field: 'id', header: 'شناسه' },
    { field: 'firstName', header: 'نام' },
    { field: 'lastName', header: 'نام خانوادگی' },
    { field: 'mobileNumber', header: 'شماره موبایل' },
    // { field: 'role', header: 'نقش', customDataModel: this.roleTpl },
    {
      field: 'role',
      header: 'نقش',
      customDataModel: (item: IUserResponse) => item.role.name ?? '-',
    },
  ] as IColumn[];

  loading = signal(false);
  items = signal<IUserResponse[]>([]);
  visibleForm = signal(false);

  refresh() {
    this.getData();
  }

  getData() {
    this.loading.set(true);
    this.userService.getAll().subscribe((res) => {
      this.loading.set(false);
      this.items.set(res.data);
    });
  }

  openAddForm() {
    this.visibleForm.set(true);
  }
}