import {Component, CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';
import {UserService} from '../../../services/user.service';
import {RolesService} from '../../../services/roles.service';
import {Role} from '../../../models/role';
import {User} from '../../../models/user.model';
import {
  MatCell,
  MatCellDef, MatColumnDef,
  MatHeaderCell, MatHeaderCellDef,
  MatHeaderRow,
  MatHeaderRowDef,
  MatRow,
  MatRowDef, MatTable
} from '@angular/material/table';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import {
  MatChipsModule
} from '@angular/material/chips';

import {AdminModuleService} from '../admin-module.service';
import {MatButtonToggle, MatButtonToggleGroup} from '@angular/material/button-toggle';
import {MatButton} from '@angular/material/button';

@Component({
  selector: 'app-users.component',
  imports: [
    MatCell,
    MatCellDef,
    MatHeaderCell,
    MatHeaderRow,
    MatHeaderRowDef,
    MatRow,
    MatRowDef,
    MatTable,
    MatColumnDef,
    MatHeaderCellDef,
    FormsModule,
    ReactiveFormsModule,
    MatChipsModule,
    MatButtonToggleGroup,
    MatButtonToggle,
    MatButton
  ],
  templateUrl: './users.component.html',
  styleUrl: './users.component.scss',
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class UsersComponent {

  allRoles:Role[] = [];
  users: User[] = [];

  displayedColumns: string[] = UserColumns.map((col) => col.key)
  columnsSchema: any = UserColumns

  constructor(private userService: UserService,
              private roleService: RolesService,
              private adminService:AdminModuleService) {
    this.getAllRoles();
    this.getUsers();
  }

  getAllRoles():any{
    this.roleService.getAllRoles().subscribe(
      (data : any) => {
        this.allRoles = data;
        console.log(data);
      },
      (err : any)=> {
        this.allRoles = JSON.parse(err.error).message;
      }
    );
  }

  getUsers(){
    this.userService.getAdminBoard().subscribe(
      (data : any) => {
        this.users = data;
        console.log(data);
      },
      (err : any)=> {
        console.log(JSON.parse(err.error).message);
      }
    );
  }

   saveUserRoles(user:User){
    this.adminService.updateUserRoles(user.id, user).subscribe(
      (data:any) => {
        console.log(data);
        user.isEdit = false
      },
      (err:any) => {
        console.log(err);
      }
    )
   }

  isChecked(element: User, role: Role) {
    let userRoles: Role[] = element.roles;
    return element.roles.some((r:Role) => r.id === role.id);
  }

  onValChange(element:User, role: Role) {
    let userRoles: Role[] = element.roles;
    if (this.isChecked(element, role)) {
      userRoles = userRoles.filter((r:Role) => r.id !== role.id);
    }else {
      userRoles.push(role);
    }
    element.roles = userRoles;
  }

  isDisabled(element:User, role: Role) {
    return role.name?.includes(<string>element.username?.toUpperCase());
  }
}

export const UserColumns = [
  {
    key: 'username',
    type: 'text',
    label: 'Name',
    required: true,
  },
  {
    key: 'email',
    type: 'text',
    label: 'Email',
  },
  {
    key: 'roles',
    type: 'list',
    label: 'Roles',
    required: true,
  },
  {
    key: 'isEdit',
    type: 'isEdit',
    label: '',
  },
];