import { ChangeDetectorRef, Component, Input, OnInit, ViewChild, NgZone } from '@angular/core';
import { FormArray, FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
import { Store } from '@ngrx/store';
import * as uuid from 'node-uuid';

import {
  IClients, INameValidation, language, maxParameterName, minParameterName
} from '../../../../app.config';
import { UIModalComponent } from '../../../shared/semantic/modal/modal.component';
import { IAppState } from '../../../../store';
import { Utilities } from '../../../../services/utilities/form.utility';
import {
  PARAMETER_UPDATE, PARAMETER_LOCKED_VALUE_ADD, PARAMETER_LOCKED_VALUE_DELETE, PARAMETER_LOCKED_VALUE_UPDATE,
  PROJECT_PARAMETERS_CREATE, PARAMETER_ENABLE_LOCKED_VALUE
} from '../../../../store/projects/projects.actions';
import { IParametersDropdown, ParametersDropdown } from '../data/service/parameters-config';
import { MODAL_SHOW } from '../../../../store/layout/layout.actions';
import { IParameters } from '../../../../models/models';
import { ApiService } from '../../../../services/application/api.service';
import { SuiTabset } from '../../../shared/semantic/sui-tab/components/tabset';
import { Parser } from '../../../../services/utilities/parser.utility';
import { ICategory } from '../../../../models/category/category.model';
import { Observable } from 'rxjs/Observable';
import { IProject } from '../../../../models/project/project.model';


import { ITableStructure } from '../../../../models/ui/table.model';
import { UIParameterCategoriesTableComponent } from '../../../shared/parameter-categories/parameter-categories-table';
import { FilterUtilities } from '../../../../services/utilities/filter.utility';
import { Tab } from '../../../shared/semantic/sui-tab/classes/tab';


@Component({
  selector: 'be-project-parameters-modal',
  templateUrl: './project-parameters-modal.component.html',
  styleUrls: ['project-parameters-modal.component.css']
})

export class ParametersModalProjectComponent implements OnInit {

  table: ITableStructure;

  @Input() activeClients: Array<{}> = [];
  @Input() projectGuid: string;
  @Input() editMode = false;
  @Input() loading = false;
  @Input() errors: {};
  @Input() activeProjectCategories: Array<ICategory> = [];
  @Input() projectParameters: IParameters[];


  lockedValueForEdit: string;
  lockedValues = false;

  parametersForm: FormGroup;
  listOfValuesForm: FormGroup;

  paramValues: IParametersDropdown = ParametersDropdown; // dropdown values
  selectedProject$: Observable<IProject>;
  allParameters: string[] = [];
  categoriesForms: FormArray;
  parameterLockedValuesArray: Array<{ editing: boolean; value: string }> = [];
  parameterLockedValuesArrayLowerCase: string[] = [];
  editingModeLockedValue = false;
  errorMessage: string; // error message for locked values
  parameterGuid: string;
  oldValue: string;
  parameterEditValidation: INameValidation = {
    listOfNames: [],
    editName: ''
  };
  lockedValueValidation: INameValidation = {
    listOfNames: [],
    editName: ''
  };
  valuesSearch: string;
  selectAllCategories: boolean; // variable for controlling select all categories
  valueToRemove: string;
  @ViewChild('modal') modal: UIModalComponent;
  @ViewChild('tabSet') tabSet: SuiTabset;
  @ViewChild('lockedValueInput') lockedValueInput: any;
  @ViewChild('categoriesTable') categoriesTable: UIParameterCategoriesTableComponent;
  @ViewChild('deleteLockedValueModal') deleteLockedValueModal;
  @ViewChild('tabLV') lockedListOfValuesTab;

  constructor(private fb: FormBuilder,
              private store: Store<IAppState>,
              private apiService: ApiService,
              public parser: Parser,
              private zone: NgZone,
              private cd: ChangeDetectorRef) {

    this.table = {
      columns: [
        {name: 'BIMeye'},
        {name: 'Revit'},
        {name: 'ArchiCAD'},
        {name: 'Tekla'},
      ],
      tableClass: 'ui small fixed celled table'
    };

    // project parameters create form validation
    this.parametersForm = this.fb.group({
      name: new FormControl('', Validators.compose([
        Utilities.requiredValidator(language.nameLength.name_required),
        Utilities.minLengthValidator(minParameterName, language.nameLength.too_short),
        Utilities.maxLengthValidator(maxParameterName, language.nameLength.too_long),
        Utilities.uniqueName(this.parameterEditValidation, language.nameExists)
      ])),
      guid: new FormControl(uuid.v4(), Validators.compose([
        Validators.required
      ])),
      customTooltip: new FormControl(''),
      settings: this.fb.group({
        canCopy: new FormControl(this.paramValues.canCopy[0].value, Validators.required),
        dataType: new FormControl(this.paramValues.dataType[0].value, Validators.required),
        parameterType: new FormControl(this.paramValues.parameterType[0].value, Validators.required),
        inUse: new FormControl(true, Validators.required),
        readOnly: new FormControl(this.paramValues.readOnly[0].value, Validators.required)
      }),
      categories: new FormArray([]),
      clients: new FormArray([])
    });

    this.listOfValuesForm = this.fb.group({
      addValue: new FormControl('', Validators.compose([
        Utilities.requiredValidator(language.nameLength.name_required),
        Utilities.minLengthValidator(minParameterName, language.nameLength.too_short),
        Utilities.maxLengthValidator(maxParameterName, language.nameLength.too_long),
        Utilities.uniqueName(this.lockedValueValidation, language.nameExists)
      ])),
      enabled: new FormControl(''),
      lockedValuesSearch: new FormControl(''),
      updateValue: new FormControl('', Validators.compose([
        Utilities.requiredValidator(language.nameLength.name_required),
        Utilities.minLengthValidator(minParameterName, language.nameLength.too_short),
        Utilities.maxLengthValidator(maxParameterName, language.nameLength.too_long),
        Utilities.uniqueName(this.lockedValueValidation, language.nameExists)
      ]))
    });

    // locked values search
    this.listOfValuesForm
      .get('lockedValuesSearch')
      .valueChanges
      .subscribe((value: string) => {
        this.valuesSearch = value;
        this.zone.run(() => this.cd.markForCheck());
      });

    this.selectedProject$ = this.store.select('projects').pluck('selectedProject');

    this.selectedProject$.subscribe(
      (project: IProject) => {
        if (project && project.hasOwnProperty('parameters')) {
          project.parameters.items.forEach((parameter) => {
              this.allParameters.push(parameter.name);
            }
          );
        }
      }
    );
  }

  ngOnInit(): void {
    // get all active clients and parse them as key => value
    this.initializeClients();
    this.categoriesForms = this.parametersForm.get('categories') as FormArray;
  }


  /**   * Create parameters
   */
  createOrUpdateParameter(): void {

    if (this.parametersForm.valid) {
      this.errors = undefined;
      this.store.dispatch({
        type: !this.editMode ? PROJECT_PARAMETERS_CREATE : PARAMETER_UPDATE,
        payload: !this.editMode ? {
          parameter: this.parametersForm.value,
          projectGuid: this.projectGuid
        } : Object.assign({}, {
          project: this.projectGuid
        }, this.parametersForm.value)
      });
    }
  }

  clearTabs(): void {
    this.tabSet.tabs.forEach((tab: Tab) => {
      tab.isActive = false;
      this.zone.run(() => this.cd.markForCheck());
    });
  }

  show(editMode: boolean, parameterGuid?: string, firstTabActive: boolean = true): void {

    this.clearTabs();

    if (firstTabActive && this.tabSet.tabs.length > 0) {
      this.tabSet.activeTab = this.tabSet.tabs[0];
      this.zone.run(() => this.cd.markForCheck());
    }

    this.editMode = editMode;
    this.resetCategories();
    this.selectedProject$ = this.store.select('projects').pluck('selectedProject');
    this.parameterEditValidation.editName = '';
    this.lockedValueValidation.listOfNames = [];
    this.lockedValueValidation.editName = '';


    this.selectedProject$.subscribe(
      (project: IProject) => {
        if (project && project.hasOwnProperty('parameters')) {
          project.parameters.items.forEach((parameter) => {
              this.parameterEditValidation.listOfNames.push(parameter.name);
              if (parameter.guid === parameterGuid) {
                this.parameterEditValidation.editName = parameter.name;
              }
            }
          );
        }
      }
    );

    if (this.editMode && parameterGuid) {
      this.parameterGuid = parameterGuid;

      this.apiService
        .getByModule(`project/${this.projectGuid}/parameter/${parameterGuid}`, 'data')
        .first()
        .subscribe((responseParameter: IParameters) => {
          responseParameter.categories.forEach(categories => {
            this.categoriesForms.push(this.fb.group({
                name: new FormControl(categories.name),
                guid: new FormControl(categories.guid)
              })
            );
          });

          this.parametersForm.patchValue(responseParameter);

          if (this.projectParameters) {
            this.projectParameters.forEach((parameter: IParameters) => {
              if (parameter.guid === this.parameterGuid && this.editMode && parameter.hasOwnProperty('listOfValues')) {
                this.lockedValues = parameter.listOfValues.enabled;
                this.parameterLockedValuesArray = parameter.listOfValues.values.map((val) => {
                  this.lockedValueValidation.listOfNames.push(val);

                  return {
                    editing: false,
                    value: val
                  };
                });
                 this.listOfValuesForm.get('enabled').setValue(this.lockedValues);
                  // disable or enable values input depends on is enabled true or false
                  !this.lockedValues ? this.listOfValuesForm.get('addValue').disable() : this.listOfValuesForm.get('addValue').enable();
              }
            });
          }
          // Get locked values for parameter
/*
          this.selectedProject$.subscribe((project: IProject) => {
            if (project && project.parameters !== undefined) {
              project.parameters.items.forEach((parameter: IParameters) => {
                if (parameter.guid === this.parameterGuid) {
                  this.lockedValues = parameter.listOfValues.enabled;
                  this.zone.run(() => this.cd.markForCheck());
                  if (parameter.hasOwnProperty('listOfValues')) {
                    this.parameterLockedValuesArray = parameter.listOfValues.values.map(val => ({
                      editing: false,
                      value: val
                    }));
                    this.parameterLockedValuesArray.forEach((lockedValue) => {
                      this.lockedValueValidation.listOfNames.push(lockedValue.value);
                    });
                    this.zone.run(() => this.cd.markForCheck());

                    if (this.editMode) {
                      this.listOfValuesForm.get('enabled').setValue(this.lockedValues);
                      // disable or enable values input depends on is enabled true or false
                      !this.lockedValues ? this.listOfValuesForm.get('addValue').disable() : this.listOfValuesForm.get('addValue').enable();
                      this.zone.run(() => this.cd.markForCheck());
                    }
                  }
                }
              });
            }
          });
*/

          this.showParameterModal();
        });
      return;
    }


    this.parametersForm.get('guid').setValue(uuid.v4());
    this.parametersForm.get('customTooltip').setValue('');
    this.resetToDefaultFormSettings();
    this.errors = undefined;
    this.showParameterModal();
  }

  hide(): void {
    this.modal.hide();
  }

  /**
   * Showing input box
   * when double click on value
   * @param value
   * */
  inlineEdit(value): void {
    this.lockedValueValidation.editName = value;
    this.oldValue = value;
    this.parameterLockedValuesArray.forEach((param) => {
      param.editing = param.value === value;
    });
    this.listOfValuesForm.get('updateValue').setValue(value);
  }

  showDeleteValueModal(value: string): void {
    this.createOrUpdateParameter();
    this.deleteLockedValueModal.show();
    this.valueToRemove = value;
  }

  onHideDeleteValueModal(): void {
    this.show(true, this.parameterGuid, false);
    this.setLockedValuesTabActive();
  }

  /**
   * check if value is unique and valid
   * if value is valid and unique it would be updated
   * in parameter locked values array
   * else it will display error
   * @param value
   */
  updateLockedValue(value: string): void {
    value = this.listOfValuesForm.get('updateValue').value.trim();
    this.store.dispatch({
      type: PARAMETER_LOCKED_VALUE_UPDATE,
      payload: {
        projectGuid: this.projectGuid,
        parameterGuid: this.parameterGuid,
        oldValue: this.oldValue,
        newValue: value
      }
    });
  }

  cancelEditLockedValue(value): void {
    this.parameterLockedValuesArray.map((item) => {
      if (item.value === value) {
        item.editing = false;
      }
    });
  }

  // Trim whitespaces before and after entered value and dispatch action
  addLockedValues(): void {
    const value: string = this.listOfValuesForm.get('addValue').value.trim();

    this.store.dispatch({
      type: PARAMETER_LOCKED_VALUE_ADD,
      payload: {
        projectGuid: this.projectGuid,
        parameterGuid: this.parameterGuid,
        value: value
      }
    });

    this.lockedValuesInputClear();
  }


  /**
   * Remove locked value from parameter
   * @param value
   */
  removeLockedValue(): void {
    this.store.dispatch({
      type: PARAMETER_LOCKED_VALUE_DELETE,
      payload: {
        projectGuid: this.projectGuid,
        parameterGuid: this.parameterGuid,
        value: this.valueToRemove
      }
    });
    this.deleteLockedValueModal.hide();
  }


  onProjectParametersModalHide(): void {
    this.setLockedValuesTabInactive();
    this.parametersForm.reset();
    this.errors = undefined;
    this.editingModeLockedValue = false;
    this.lockedValuesInputClear();

    // reset search on categories on modal hide
    this.categoriesTable.search = undefined;
    this.categoriesTable.resetSearch();
    this.selectAllCategories = false;
  }

  // reset search input and input for creating locked values
  lockedValuesInputClear(): void {
    this.listOfValuesForm.get('addValue').reset();
    this.listOfValuesForm.get('lockedValuesSearch').setValue('');
  }

  /**
   * Receive value from locked
   * values checkbox and enable/disable
   * values on parameter
   * @params status {boolean}
   */
  onCheckboxLockedValues(status: boolean): void {

    this.store.dispatch({
      type: PARAMETER_ENABLE_LOCKED_VALUE,
      payload: {
        parameterGuid: this.parameterGuid,
        projectGuid: this.projectGuid,
        enabled: status
      }
    });

    this.lockedValuesInputClear();
  }

  private showParameterModal(): void {
    this.store.dispatch({
      type: MODAL_SHOW
    });

    this.modal.show();
  }

  setLockedValuesTabInactive(): void {
    if (this.lockedListOfValuesTab !== undefined && this.tabSet.tabs.length > 0) {
      this.tabSet.tabs.forEach((tab: Tab) => {
        if (tab.id === this.lockedListOfValuesTab.id) {
          tab.isActive = false;
          this.zone.run(() => this.cd.markForCheck());
        }
      });
    }
  };

  setLockedValuesTabActive(): void {
    if (this.tabSet) {
      this.tabSet.tabs.forEach((tab: Tab) => {
        tab.isActive = false;
        this.zone.run(() => this.cd.markForCheck());
        if (tab.id === this.lockedListOfValuesTab.id) {
          tab.isActive = true;
          this.zone.run(() => this.cd.markForCheck());
        }
      });
    }
  }

  private resetToDefaultFormSettings(): void {
    this.parametersForm.get('settings').get('canCopy').setValue(this.paramValues.canCopy[0].value);
    this.parametersForm.get('settings').get('dataType').setValue(this.paramValues.dataType[0].value);
    this.parametersForm.get('settings').get('parameterType').setValue(this.paramValues.parameterType[0].value);
    this.parametersForm.get('settings').get('inUse').setValue(true);
    this.parametersForm.get('settings').get('readOnly').setValue(this.paramValues.readOnly[0].value);
    this.parametersForm.get('categories').setValue([]);
    this.initializeClients();
  }

  private initializeClients(): void {
    const controls: FormArray = this.parametersForm.get('clients') as FormArray;

    if (controls.length) {
      for (let i = 0; i < controls.length; i++) {
        controls.at(i).patchValue({
          client: this.activeClients[i]['_id'],
          code: this.activeClients[i]['code'],
          identifier: '',
          nameInModel: '',
          syncToBimeye: this.paramValues.syncToBimeye[1].value,
          syncFromBimeye: this.paramValues.syncFromBimeye[1].value
        });
      }
    } else {
      this.activeClients
        .forEach((client: IClients, index: number) => (this.parametersForm.get('clients') as FormArray).push(this.fb.group({
          client: new FormControl(client['_id']),
          code: new FormControl(client['code']),
          identifier: new FormControl(''),
          nameInModel: new FormControl(''),
          syncToBimeye: new FormControl(this.paramValues.syncToBimeye[1].value, Validators.required),
          syncFromBimeye: new FormControl(this.paramValues.syncFromBimeye[1].value, Validators.required)
        })));
    }
  }

  /**
   * On category click
   * @param event
   */
  onCategoryClick(event: { name: string, guid: string, isChecked: boolean }) {

    if (event.isChecked) {
      this.categoriesForms.push(this.fb.group({
          name: new FormControl(event.name),
          guid: new FormControl(event.guid)
        })
      );
    } else {
      let i = 0;

      this.categoriesForms.controls.forEach((ctrl: FormControl) => {
        if (ctrl.value.name === event.name) {
          this.categoriesForms.removeAt(i);
          return;
        }

        i++;
      });
    }
  }

  /**
   * Check is category active. This is used for update window.
   * @param categoryGuid
   * @returns {boolean}
   */
  isCategoryActive(categoryGuid: string): boolean {
    let checked = false;

    this.parametersForm.get('categories').value.forEach(checkedCategory => {
      if (checkedCategory.guid === categoryGuid) {
        checked = true;
        return;
      }
    });

    return checked;
  }

  /**
   * On category click
   * @param event
   */
  onSelectAllCategories(event: { isChecked: boolean, search: string, columns: Array<string> }) {
    this.selectAllCategories = true;
    const searchedCategories: Array<{}> = FilterUtilities.multiColumnNestedFilter(this.activeProjectCategories, event.search, event.columns);

    if (event.isChecked) {
      this.resetCategories();
      searchedCategories.forEach((category: ICategory) => {
        this.categoriesForms.push(this.fb.group({
          name: new FormControl(category.name),
          guid: new FormControl(category['guid'])
        }));
      });
    } else {
      this.resetCategories();
    }
  }

  /**
   * Function which deselect all categories
   */
  private resetCategories() {
    const len = this.categoriesForms.controls.length;
    if (len >= 1) {
      for (let i = len; i >= 0; i--) {
        this.categoriesForms.removeAt(i);
      }
    }
  }
}