import { Component, OnInit, Input } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { Router, ActivatedRoute } from '@angular/router';
import { PrivilegeConstants } from '../../../constants/privilege.constants';
import { ProfileService } from '../../../services/profile.service';
import { Profile } from '../profile.model';
import { MenuTreeNode } from '../menu-tree-node.model';
import { ProfileUpdateDTO } from '../ProfileUpdateDTO';
@Component({
  selector: 'app-profile-add-update',
  templateUrl: './profile-add-update.component.html',
  styleUrls: ['./profile-add-update.component.css']
})
export class ProfileAddUpdateComponent implements OnInit {
  profileForm: FormGroup;
  profile: Profile;
  menuList: MenuTreeNode[];
  selectedProfile: Profile;
  menuTreeNode: MenuTreeNode[];
  cols: any[];
  selectedMenuItems = [];
  isAdd: boolean;
  profileModeLabel = '';
  id: number;
  breadCrumbTitle = 'Add';
  profileEditPrivilege = PrivilegeConstants.PROFILE_EDIT;
  @Input()
  profileId: string;

  datas: [];
  constructor(
    private formBuilder: FormBuilder,
    private profileService: ProfileService,
    private router: Router,
    private route: ActivatedRoute
  ) {}

  ngOnInit() {
    console.log('profileId', this.profileId);
    this.createForm();
    this.init();
  }

  init() {
    if (this.profileId != null) {
      this.profileModeLabel = this.profileId;
      this.isAdd = true;
    }
    // this.profileModeLabel = this.route.snapshot.routeConfig.data.mode;
    // this.isAdd = this.route.snapshot.routeConfig.data.mode === 'Add';

    this.id = +this.profileId;

    if (this.id) {
      this.breadCrumbTitle = '' + this.id;
      this.profileService.getMenusByProfileId(this.id).subscribe(data => {
        this.selectedMenuItems = data.menuItemIds;
        this.getMenuTreeNode();
        this.selectedProfile = data;
        this.setToFormGroup(this.selectedProfile);
      });
    } else {
      this.getMenuTreeNode();
    }
  }

  createForm() {
    console.log('123');
    this.profileForm = this.formBuilder.group({
      name: ['', Validators.required],
      description: ['', Validators.required]
    });
  }

  saveProfile(): void {
    let profile: ProfileUpdateDTO = this.profileForm.value;
    profile.menuItemIds = this.selectedMenuItems;
    console.log('Profile:', profile);
    if (this.isAdd === true) {
      // profile.active = false;
      this.profileService.create(profile).subscribe(
        data => {
          console.log('saved user', data);
          this.router.navigateByUrl('/profiles');
        },
        error => console.log('oops', error)
      );
    } else {
      profile.id = this.id;
      this.profileService.update(profile).subscribe(
        data => {
          console.log('saved user', data);
          this.router.navigateByUrl('/profiles');
        },
        error => console.log('oops', error)
      );
    }
  }

  getMenuTreeNode(): void {
    this.profileService.getMenusForProfileCreation().subscribe(data => {
      this.menuTreeNode = data;
      console.log('menutTreenode', this.menuTreeNode);
      this.setSelectedMenuItems();
    });
  }

  setSelectedMenuItems(): any {
    let menu: MenuTreeNode;
    for (menu of this.menuTreeNode) {
      this.addMenuItemIdIfValueTrue(menu);

      if (menu.children && menu.children.length > 0) {
        let submenu: MenuTreeNode;
        for (submenu of menu.children) {
          this.addMenuItemIdIfValueTrue(submenu);
        }
      }
    }
    console.log('this.selectedMenuItems', this.selectedMenuItems);
  }

  addMenuItemIdIfValueTrue(menu: any) {
    if (this.selectedMenuItems.find(x => x === menu.data.addOperation.id)) {
      menu.data.addOperation.value = true;
    }
    if (this.selectedMenuItems.find(x => x === menu.data.editOperation.id)) {
      menu.data.editOperation.value = true;
    }
    if (this.selectedMenuItems.find(x => x === menu.data.deleteOperation.id)) {
      menu.data.deleteOperation.value = true;
    }
    if (this.selectedMenuItems.find(x => x === menu.data.viewOperation.id)) {
      menu.data.viewOperation.value = true;
    }
  }

  addMenuItems(id: number, selected: boolean) {
    if (this.selectedMenuItems.indexOf(id) > -1 && selected === false) {
      this.selectedMenuItems.splice(this.selectedMenuItems.indexOf(id), 1);
    } else if (this.selectedMenuItems.indexOf(id) <= -1 && selected === true) {
      this.selectedMenuItems.push(id);
    }
    console.log('selected', this.selectedMenuItems);
  }

  clear(): void {
    this.setToFormGroup({ name: '', description: '' });
  }

  setToFormGroup(profile) {
    this.profileForm.patchValue({
      id: profile.id,
      name: profile.name,
      description: profile.description
    });
  }

  selectOption(rowData) {
    console.log(
      'Before add, edit, view, delete: ' +
        rowData.addOperation.value +
        rowData.editOperation.value +
        rowData.deleteOperation.value +
        rowData.viewOperation.value
    );

    if (
      rowData.addOperation.value ||
      rowData.editOperation.value ||
      rowData.deleteOperation.value
    ) {
      rowData.viewOperation.value = true;
      this.addMenuItems(rowData.viewOperation.id, rowData.viewOperation.value);
    }

    console.log(
      'Afteradd, edit, view, delete: ' +
        rowData.addOperation.value +
        rowData.editOperation.value +
        rowData.deleteOperation.value +
        rowData.viewOperation.value
    );
  }

  viewOption(rowData) {
    if (!rowData.viewOperation.value) {
      rowData.addOperation.value = false;
      rowData.editOperation.value = false;
      rowData.deleteOperation.value = false;
      this.addMenuItems(rowData.addOperation.id, rowData.addOperation.value);
      this.addMenuItems(rowData.editOperation.id, rowData.editOperation.value);
      this.addMenuItems(
        rowData.deleteOperation.id,
        rowData.deleteOperation.value
      );
    }
  }
}