import { Component, OnInit, ViewChild } from '@angular/core';
import { DropEvent } from 'ng-drag-drop';
import { TabTemplate } from '../../models/tabTemplate.model';
import { FormSkeleton } from '../../models/formSkeleton.model';
import { FormBuilder } from '@angular/forms';
import { ValidationModel } from '../../models/validation.model';
import { ActivatedRoute, Router } from '@angular/router';
import { DraggablesModelEvents } from '../../models/draggableEvents.model';
import { DraggableItem } from '../../models/draggableItem.model';
import { DictionaryModel } from '../../models/dictionary.model';
import { ContainerModel } from '../../models/container.model';
import { ContainerItemModel } from '../../models/containerItem.model';
import { ContextMenuComponent, ContextMenuService } from 'ngx-contextmenu';
import { DraggableListMenuComponent } from '../sidebars/draggable-list-menu/draggable-list-menu.component';
import { DraggableEditingMenuComponent } from '../sidebars/draggable-editing-menu/draggable-editing-menu.component';
import { TabTemplatesService } from '../../services/tab-templates.service';

@Component({
  selector: 'app-draggables-form-skeleton',
  templateUrl: './draggables-form-skeleton.component.html',
  styleUrls: ['./draggables-form-skeleton.component.css']
})

export class DraggablesFormSkeletonComponent implements OnInit {

  //#region Attributes

  private static MAX_COLUMNS = 3;
  private savedUnchangedFormSkeleton: FormSkeleton = new FormSkeleton();
  private chosenFormSkeletonForEditing: TabTemplate = new TabTemplate();
  private mainTabTemplate: TabTemplate = new TabTemplate();

  // hovered item
  private hoveredItem = null;
  private hoveredItemKey = 0;

  // array of rows
  public layoutRows: Array<ContainerModel> = [];
  private layoutRowsSorted = [];


  // hovering item gets this values
  private containerItemModelNumber: number = 0;
  private layoutRowsNumber: number = 0;

  // validation part
  private validationModelKey: number;
  private validationMessageCounter: number = 1;
  private changedValidationModel;

  // allow dragging
  private draggingEnabled: boolean = true;

  // open details
  private leftsidebarOpen: boolean = false;

  // the number of all existing containers
  private containerKey: number = 0;

  // On drop item flag
  public anItemWasDropped: boolean = false;

  // Count how many columns user adds
  private columnNumber: number = 0;

  // Getting the right height for divs
  private biggestRowArray: Array<string> = [];
  private additionalHeightForDropHereDiv: number = 0;
  private listOfOffsetTopDataForAppItem: Array<number> = new Array<number>();
  private sizeWindow: number = 0;
  private rowHeightsOfRows: number = 0;
  public reusables;

  // Right click on item opens basic menu
  @ViewChild(ContextMenuComponent) public basicMenu: ContextMenuComponent = new ContextMenuComponent(this.service, null, null, null);
  @ViewChild(DraggableListMenuComponent) public draggableListMenuComponent: DraggableListMenuComponent;
  @ViewChild(DraggableEditingMenuComponent) public draggableEditingMenuComponent: DraggableEditingMenuComponent;

  constructor(private service: ContextMenuService, private formBuilder: FormBuilder, private route: ActivatedRoute,
    private router: Router, private draggablesEvents: DraggablesModelEvents, private tabTemplatesService: TabTemplatesService) { }

  //#endregion

  ngOnInit() {
    this.subscribeOnDraggableMethods();
    // Add first container, that shows on a first screen
    const containers = new Array<ContainerItemModel>(new ContainerItemModel(this.containerKey, 1, 0, false,
      new DictionaryModel([])));
    this.layoutRows.push(new ContainerModel(containers));

    // increase number of containers
    this.containerKey++;

    this.reusables = this.tabTemplatesService.getReusableElements();
    // Get the size of a window
    this.sizeWindow = window.innerWidth;
  }



  mergeCells() {
    const selectedItemsMatrix = this.layoutRows.map((row: ContainerModel) => {
      return row.containerItems.filter((column: ContainerItemModel) => {
        return column.selectFlag === true;
      });
    });

    // Count how many fields are selected
    let counterOfSelectedFields = 0;
    selectedItemsMatrix.forEach(arrayItem => {
      arrayItem.forEach((container) => {
        if (container) {
          counterOfSelectedFields++;
        }
      });
    });

    // Only two field can be selected
    if (counterOfSelectedFields > 2) {
      alert('User can select only two field at once!');
    } else {
      const draggableItems: Array<DraggableItem> = [];
      const selectedRows = selectedItemsMatrix.length;
      this.updateContainerKeys();

      const BreakException = {};

      try {
        for (let i = 0; i < selectedRows; i++) {
          const selectedCols = selectedItemsMatrix[i].length;
          for (let j = 0; j < selectedCols; j++) {
            this.layoutRows.forEach((row: ContainerModel, rowIndex) => {
              row.containerItems.forEach((column: ContainerItemModel, index) => {
                // Selected fields are in one row
                if (selectedItemsMatrix[i][j + 1]) {
                  if (selectedItemsMatrix[i][j].row === selectedItemsMatrix[i][j + 1].row) {
                    if (column.key === (selectedItemsMatrix[i][j + 1].key)) {
                      draggableItems.push(...column.dictionaryModel.draggableItems);
                      row.containerItems.splice(index, 1);
                      this.updateContainerKeys();
                      this.updateContainerColumnsAndRows(row.containerItems);
                      this.containerKey--;
                      row.containerItems.find(x => x.key === (column.key - 1)).dictionaryModel.draggableItems.push(...draggableItems);
                      throw BreakException;
                    }
                  }
                } else
                  // Selected fields are in one column
                  if (selectedItemsMatrix[i + 1][j]) {
                    if (selectedItemsMatrix[i][j].column === selectedItemsMatrix[i + 1][j].column) {
                      if (selectedItemsMatrix[i + 1][j].key === column.key) {
                        draggableItems.push(...column.dictionaryModel.draggableItems);
                        row.containerItems.splice(index, 1);
                        if (row.containerItems.length === 0) {
                          this.layoutRows.splice(rowIndex, 1);
                        }
                        this.updateContainerKeys();
                        this.updateContainerColumnsAndRows(row.containerItems);
                        this.containerKey = this.containerKey - 1;
                        this.layoutRows.forEach(layoutRow => {
                          layoutRow.containerItems.forEach(rowColumn => {
                            if (rowColumn.key === selectedItemsMatrix[0][0].key) {
                              rowColumn.dictionaryModel.draggableItems.push(...draggableItems);
                            }
                          });
                        });
                        throw BreakException;
                      }
                    }
                  }
              });
            });
          }
        }
      } catch (e) {
        if (e !== BreakException) {
          throw e;
        }
      }
      this.updateContainerKeys();
    }
  }


  //#region UI for cells

  returnClassForTheContainer(containerItemsOfOneRow: Array<ContainerItemModel>, oneContainerItem: ContainerItemModel) {

    this.layoutRows.forEach((row, rowIndex) => {
      row.containerItems.forEach((column, colIndex) => {
        if (column.dictionaryModel.draggableItems.length !== 1) {
          column.dictionaryModel.draggableItems.forEach((draggableItem, itemIndex) => {
            if (draggableItem.value.dataType === 'unvisible') {
              column.dictionaryModel.draggableItems.splice(itemIndex, 1);
            }
          });
        }
      });
    });
    this.layoutRows.forEach((row, rowIndex) => {
      row.containerItems.forEach((column, colIndex) => {
        if (column.dictionaryModel.draggableItems.length === 0) {
          column.dictionaryModel.draggableItems.push({ key: 1, value: new FormSkeleton('unvisible') });
        }
      });
    });
    const lengthOfContainerItemsOfOneRow = containerItemsOfOneRow.length;

    const divideWidth: any = 12 / lengthOfContainerItemsOfOneRow;
    let containerClassString: string = 'col-md-' + Math.round(divideWidth) + ' col-lg-' + Math.round(divideWidth) + ' class';

    oneContainerItem.selectFlag === true ? containerClassString = containerClassString + ' addBlackSelectColor' :
      containerClassString = containerClassString + '';

    const splitHeight = 86 / this.layoutRows.length;
    this.updateContainerKeys();



    // Change height of a divs with class 'col-md-11 col-lg -11 class11' regarding to number of rows
    const elements11 = <HTMLCollectionOf<HTMLDivElement>>document.getElementsByClassName('class11');
    for (let i = 0; i < elements11.length; i++) {
      if (this.sizeWindow < 992) {
        if (this.columnNumber === 2) {
          elements11[i].style.height = (splitHeight * 2) + 'vH';
        } else if (this.columnNumber === 3) {
          elements11[i].style.height = (splitHeight * 3) + 'vH';
        }
      } else {
        elements11[i].style.height = splitHeight + 'vH';
      }
      elements11[i].style.padding = '0px';
      elements11[i].style.border = '1px dashed lightblue';
    }

    // If there are items dropped in a container, height is unset
    this.layoutRows.forEach((row, index) => {
      row.containerItems.forEach(column => {
        if (column.dictionaryModel.draggableItems.length !== 0) {
          elements11[index].style.height = 'unset';
        }
      });
    });

    // Change height of a divs with class 'col-md-12 col-lg -12 class' regarding to number of rows
    const elements12 = <HTMLCollectionOf<HTMLDivElement>>document.getElementsByClassName('class');
    for (let i = 0; i < elements12.length; i++) {
      elements12[i].style.height = splitHeight + 'vH';
      elements12[i].style.padding = '0px';
    }
    this.updateContainerKeys();

    // When draggable items array length is zero
    this.layoutRows.forEach((row, rowIndex) => {
      row.containerItems.forEach((column, colIndex) => {
        let unvisibleExist = false;
        for (let p = 0; p < column.dictionaryModel.draggableItems.length; p++) {
          if (column.dictionaryModel.draggableItems[p].value.dataType === 'unvisible') {
            unvisibleExist = true;
          }
        }
        if (unvisibleExist === false) {
          if (elements12.length !== 0) {
            if (!elements12[column.key]) {
              elements12[rowIndex].style.height = 'unset';
            } else {
              elements12[column.key].style.height = 'unset';
            }
          }
        }
      });
    });



    // Get the biggest container height of every row
    let maxLength = 0;
    const biggestContainerRowHeight: Array<string> = [];
    this.layoutRows.forEach((row, rowIndex) => {
      let measureLength = 0;
      row.containerItems.forEach((column, colIndex) => {
        if (elements12[row.containerItems[colIndex].key]) {
          if (elements12[row.containerItems[colIndex].key].offsetHeight > measureLength) {
            measureLength = elements12[row.containerItems[colIndex].key].offsetHeight;
            maxLength = measureLength;
          }
        }
      });
      biggestContainerRowHeight.push((maxLength + this.additionalHeightForDropHereDiv).toString());
    });

    if (this.anItemWasDropped) {
      this.layoutRows.forEach((row, rowIndex) => {
        row.containerItems.forEach((column, colIndex) => {
          if (elements12[row.containerItems[colIndex].key]) {
            elements12[row.containerItems[colIndex].key].style.height = biggestContainerRowHeight[rowIndex].toString() + 'px';
          }
        });
      });
      for (let i = 0; i < elements11.length; i++) {
        if (this.sizeWindow < 992) {
          if (this.columnNumber === 2) {
            // tslint:disable-next-line:radix
            elements11[i].style.height = (2 * parseInt(biggestContainerRowHeight[i])).toString() + 'px';
          } else if (this.columnNumber === 3) {
            // tslint:disable-next-line:radix
            elements11[i].style.height = (3 * parseInt(biggestContainerRowHeight[i])).toString() + 'px';
          }
        } else {
          elements11[i].style.height = biggestContainerRowHeight[i].toString() + 'px';
        }
      }
    }
    this.biggestRowArray = biggestContainerRowHeight;
    let element8 = 0;
    this.rowHeightsOfRows = 0;
    this.layoutRows.forEach((row, rowIndex) => {
      if (rowIndex === this.layoutRowsNumber) {
        row.containerItems.forEach((column, colIndex) => {
          if (column.key === this.containerItemModelNumber) {
            if (rowIndex !== 0) {
              biggestContainerRowHeight.forEach((rowHeight, index) => {
                if (index !== (biggestContainerRowHeight.length - 1)) {
                  // tslint:disable-next-line:radix
                  this.rowHeightsOfRows = this.rowHeightsOfRows + parseInt(rowHeight);
                  element8 = element8 + 1;
                }
              });
            }
          }
        });
      }
    });


    return containerClassString;
  }

  onResize(event) {
    this.sizeWindow = event.target.innerWidth;
  }

  returnClassForMiddleComponent() {
    let classString = '';
    if (this.sizeWindow < 992 && this.leftsidebarOpen) {
      classString = 'col-md-4 col-lg-4';

    } else if (this.sizeWindow > 992 && this.leftsidebarOpen) {
      classString = 'col-md-5 col-lg-5';
    } else if (this.sizeWindow < 992 && !this.leftsidebarOpen) {
      classString = 'col-md-7 col-lg-7';
    } else if (this.sizeWindow > 992 && !this.leftsidebarOpen) {
      classString = 'col-md-8 col-lg-8';
    }
    if ((classString === 'col-md-5 col-lg-5') || (classString === 'col-md-8 col-lg-8')) {
      const buttonRow = <HTMLDivElement>document.getElementById('buttonRowInside');
      buttonRow.style.display = 'inline-block';
      const buttonRow1 = <HTMLDivElement>document.getElementById('buttonRowOutSide');
      buttonRow1.style.display = 'none';
    }
    if ((classString === 'col-md-4 col-lg-4') || (classString === 'col-md-7 col-lg-7')) {
      const buttonRow = <HTMLDivElement>document.getElementById('buttonRowOutSide');
      buttonRow.style.display = 'inline-block';
      const buttonRow1 = <HTMLDivElement>document.getElementById('buttonRowInside');
      buttonRow1.style.display = 'none';
    }
    return classString;
  }

  returnButtonClass() {
    if ((this.returnClassForMiddleComponent() === 'col-md-4 col-lg-4') || (this.returnClassForMiddleComponent() === 'col-md-7 col-lg-7')) {
      return 'addRowDiv col-md-1 col-lg-1';
    }
    return 'addRowDiv';
  }
  //#endregion

  //#region Adding column and rows

  addColumn(item) {
    let numberOfContainers = 0;
    this.layoutRows[item].containerItems.length === 0 ? numberOfContainers = 0 :
      numberOfContainers = this.layoutRows[item].containerItems.length - 1;

    const columnNumber = this.layoutRows[item].containerItems[numberOfContainers].column + 1;
    if (columnNumber > DraggablesFormSkeletonComponent.MAX_COLUMNS) {
      alert('User can add three columns only!');
    } else {
      this.layoutRows.forEach((layoutRow, rowIndex) => {
        layoutRow.containerItems.push(new ContainerItemModel(
          this.containerKey, columnNumber, rowIndex, false, new DictionaryModel([])));
        this.containerKey++;
      });
      this.updateContainerKeys();
    }
  }

  addRow() {
    const numberOfContainersFromTheLastRow = this.layoutRows[this.layoutRows.length - 1].containerItems.length;
    const numberOfRows = this.layoutRows.length;

    this.layoutRows.push(new ContainerModel([]));
    for (let i = 0; i < numberOfContainersFromTheLastRow; i++) {
      this.layoutRows[this.layoutRows.length - 1].containerItems.push(
        new ContainerItemModel(this.containerKey, i + 1, numberOfRows, false, new DictionaryModel(
          [])));
      this.containerKey++;
    }
    this.updateContainerKeys();
  }

  //#endregion

  //#region Save changes for an item

  saveData(item) {

    this.layoutRows.forEach((row, rowIndex) => {
      if (rowIndex === this.layoutRowsNumber) {
        row.containerItems.forEach((column, colIndex) => {
          if (column.key === this.containerItemModelNumber) {
            const changedValuesOfObservedItem = item[0];
            let changedValuesOfObservedItemRows = item[1];
            let changedValuesOfObservedItemColumns = item[2];

            // Changing an item in general
            if (changedValuesOfObservedItem.dataType) {
              let options: any;
              const optionsArray: any = [];
              if (item[0].options !== null) {
                options = item[0].options.split('\n');
                for (let i = 0; i < options.length; i++) {
                  optionsArray.push({ option: options[i] });
                }
              } else {
                options = '';
              }
              options = optionsArray;
              column.dictionaryModel.draggableItems.forEach((draggableItem, itemIndex) => {
                if (draggableItem.key === item[3].key) {
                  draggableItem.value.dataType = changedValuesOfObservedItem.dataType;
                  draggableItem.value.previewLabel = changedValuesOfObservedItem.previewLabel;
                  draggableItem.value.exportLabel = changedValuesOfObservedItem.exportLabel;
                  draggableItem.value.placeholder = changedValuesOfObservedItem.placeholder;
                  draggableItem.value.description = changedValuesOfObservedItem.description;
                  draggableItem.value.options = [];
                  draggableItem.value.options = options;
                  draggableItem.value.max = changedValuesOfObservedItem.max;
                  draggableItem.value.min = changedValuesOfObservedItem.min;
                  draggableItem.value.index = changedValuesOfObservedItem.index;
                  draggableItem.value.editable = changedValuesOfObservedItem.editable;
                  if (changedValuesOfObservedItem.url !== 'https://i.imgur.com/qm52RKN.png') {
                    draggableItem.value.url = changedValuesOfObservedItem.url;
                  }
                  draggableItem.value.date =
                    changedValuesOfObservedItem.date;
                  draggableItem.value.validations =
                    changedValuesOfObservedItem.validations;
                }
              });
            }
            if (changedValuesOfObservedItemColumns !== null) {
              changedValuesOfObservedItemColumns = changedValuesOfObservedItemColumns.value;
              const newTableColumnArray: Array<String> = new Array<String>();
              for (let i = 0; i < column.dictionaryModel.draggableItems.length; i++) {
                if (column.dictionaryModel.draggableItems[i].key === item[3].key) {
                  // tslint:disable-next-line:forin
                  for (const k in changedValuesOfObservedItemColumns) {
                    newTableColumnArray.push(changedValuesOfObservedItemColumns[k]);
                  }
                  const elements = column.dictionaryModel.draggableItems[i].value.tableOptions;
                  column.dictionaryModel.draggableItems[i].value.tableOptions = [];
                  column.dictionaryModel.draggableItems[i].value.tableOptions.columns =
                    newTableColumnArray;
                  column.dictionaryModel.draggableItems[i].value.tableOptions.rows =
                    elements.rows;
                  break;
                  //  =
                  //   newTableColumnArray;
                }
              }
            }
            console.log(column.dictionaryModel.draggableItems);
            // Rows of an table item changed
            if (changedValuesOfObservedItemRows !== null) {
              changedValuesOfObservedItemRows = changedValuesOfObservedItemRows.value;
              const newTableRowArray: Array<String> = new Array<String>();
              for (let i = 0; i < column.dictionaryModel.draggableItems.length; i++) {
                if (column.dictionaryModel.draggableItems[i].key === item[3].key) {
                  // tslint:disable-next-line:forin
                  for (const k in changedValuesOfObservedItemRows) {
                    newTableRowArray.push(changedValuesOfObservedItemRows[k]);
                  }
                  const elements = column.dictionaryModel.draggableItems[i].value.tableOptions;
                  column.dictionaryModel.draggableItems[i].value.tableOptions = [];
                  column.dictionaryModel.draggableItems[i].value.tableOptions.columns =
                    elements.columns;
                  column.dictionaryModel.draggableItems[i].value.tableOptions.rows =
                    newTableRowArray;
                  break;
                  // column.dictionaryModel.draggableItems[i].value.tableOptions.rows =
                  //   newTableRowArray;
                }
              }
            }
          }
        });
      }
    });
    this.leftsidebarOpen = false;
    this.chosenFormSkeletonForEditing = null;
  }

  //#endregion

  //#region Save validation messages for an item

  saveValidationData(item) {
    // Validation attributes
    let id: number = 1;
    let statement: string = '';
    let messageType: string = '';
    let messageContent: string = '';
    let keyValidation: string = '';
    let valueToCompare: any = null;
    const droppedItem = item[0];

    this.validationModelKey = item[1].key;

    // Fetching item values
    id = this.validationMessageCounter;
    statement = 'If this field is ' + droppedItem.validationSelect + ' ' + droppedItem.validationInput;
    messageType = droppedItem.messageType;
    messageContent = droppedItem.messageContent;
    if (droppedItem.validationSelect === 'greater than: ') {
      keyValidation = 'max';
      valueToCompare = droppedItem.validationInput;
    } else if (droppedItem.validationSelect === 'greater than or equal to: ') {
      keyValidation = 'max';
      valueToCompare = droppedItem.validationInput - 1;
    } else if (droppedItem.validationSelect === 'smaller than or equal to: ') {
      keyValidation = 'min';
      valueToCompare = droppedItem.validationInput + 1;
    } else if (droppedItem.validationSelect === 'smaller than: ') {
      keyValidation = 'min';
      valueToCompare = droppedItem.validationInput;
    } else if (droppedItem.validationSelect === 'equal to: ') {
      keyValidation = 'equal';
      valueToCompare = droppedItem.validationInput;
    } else if (droppedItem.validationSelect === 'not: ') {
      keyValidation = 'not';
      console.log('tu sam');
      valueToCompare = droppedItem.validationInput;
    }

    this.changedValidationModel = new ValidationModel(id, statement, messageType, messageContent, keyValidation, valueToCompare);
    if (this.saveValidationModel(this.validationModelKey)) {
      //
      this.draggablesEvents.deleteValidationMethod(droppedItem.validationSelect);
    }
  }

  //#endregion

  //#region Cancel changes off an item

  cancelChange(post) {
    for (const o in this.layoutRows[this.layoutRowsNumber].containerItems) {
      if (this.layoutRows[this.layoutRowsNumber].containerItems[o].key === this.containerItemModelNumber) {

        const savedItem = this.savedUnchangedFormSkeleton;
        for (let i = 0; i < this.layoutRows[this.layoutRowsNumber].containerItems[o].dictionaryModel.draggableItems.length; i++) {
          if (this.layoutRows[this.layoutRowsNumber].containerItems[o].dictionaryModel.draggableItems[i].key === post.key) {
            this.layoutRows[this.layoutRowsNumber].containerItems[o].dictionaryModel.draggableItems[i].value.dataType = savedItem.dataType;
            this.layoutRows[this.layoutRowsNumber].containerItems[o].dictionaryModel.draggableItems[i].value.previewLabel =
              savedItem.previewLabel;
            this.layoutRows[this.layoutRowsNumber].containerItems[o].dictionaryModel.draggableItems[i].value.exportLabel =
              savedItem.exportLabel;
            this.layoutRows[this.layoutRowsNumber].containerItems[o].dictionaryModel.draggableItems[i].value.placeholder =
              savedItem.placeholder;
            this.layoutRows[this.layoutRowsNumber].containerItems[o].dictionaryModel.draggableItems[i].value.description =
              savedItem.description;
            this.layoutRows[this.layoutRowsNumber].containerItems[o].dictionaryModel.draggableItems[i].value.required = savedItem.required;
            this.layoutRows[this.layoutRowsNumber].containerItems[o].dictionaryModel.draggableItems[i].value.options = savedItem.options;
            this.layoutRows[this.layoutRowsNumber].containerItems[o].dictionaryModel.draggableItems[i].value.max = savedItem.max;
            this.layoutRows[this.layoutRowsNumber].containerItems[o].dictionaryModel.draggableItems[i].value.min = savedItem.min;
            this.layoutRows[this.layoutRowsNumber].containerItems[o].dictionaryModel.draggableItems[i].value.index = savedItem.index;
            this.layoutRows[this.layoutRowsNumber].containerItems[o].dictionaryModel.draggableItems[i].value.editable = savedItem.editable;
            this.layoutRows[this.layoutRowsNumber].containerItems[o].dictionaryModel.draggableItems[i].value.url = savedItem.url;
            this.layoutRows[this.layoutRowsNumber].containerItems[o].dictionaryModel.draggableItems[i].value.date = savedItem.date;
          }
        }
      }
    }
    this.leftsidebarOpen = false;
    this.chosenFormSkeletonForEditing = null;
  }

  //#endregion

  //#region Cancel validation messages for an item

  cancelValidationChange(post) {
    for (const o in this.layoutRows[this.layoutRowsNumber].containerItems) {
      if (this.layoutRows[this.layoutRowsNumber].containerItems[o].key === this.containerItemModelNumber) {
        const lastOne = this.savedUnchangedFormSkeleton;
        for (let i = 0; i < this.layoutRows[this.layoutRowsNumber].containerItems[o].dictionaryModel.draggableItems.length; i++) {
          if (this.layoutRows[this.layoutRowsNumber].containerItems[o].dictionaryModel.draggableItems[i].key === post.key) {
            this.layoutRows[this.layoutRowsNumber].containerItems[o].dictionaryModel.draggableItems[i].value.validations =
              lastOne.validations;
          }
        }
      }
    }
    this.leftsidebarOpen = false;
    this.chosenFormSkeletonForEditing = null;
  }

  //#endregion

  //#region Change UI for select checkbox

  mouseOverSelectCheckbox(container) {
    this.updateContainerKeys();
    const el = <HTMLCollectionOf<HTMLInputElement>>document.getElementsByClassName('selectCheckbox');
    for (let i = 0; i < el.length; i++) {
      if (container.key === i) {
        el[i].style.display = 'inline-block';
        el[i].style.backgroundColor = 'lightgrey';
        el[i].style.height = '20px';
        el[i].style.width = '20px';
      }
    }
  }
  mouseLeaveSelectCheckbox(container) {
    const el = <HTMLCollectionOf<HTMLInputElement>>document.getElementsByClassName('selectCheckbox');
    this.updateContainerKeys();
    for (let i = 0; i < el.length; i++) {
      if (container.key === i) {
        el[i].style.display = 'inline-block';
        el[i].style.backgroundColor = 'lightgrey';
        if (el[i].checked === true) {
          el[i].style.height = '20px';
          el[i].style.width = '20px';
        } else {
          el[i].style.display = 'none';
        }
      }
    }
  }

  //#endregion

  //#region Update methods

  updateContainerKeys() {
    let counter = 0;
    for (let v = 0; v < this.layoutRows.length; v++) {
      for (let c = 0; c < this.layoutRows[v].containerItems.length; c++) {
        this.layoutRows[v].containerItems[c].key = counter;
        counter = counter + 1;
      }
    }
  }

  updateContainerColumnsAndRows(containerItems_: Array<ContainerItemModel>) {
    let columnCounter = 1;
    containerItems_.forEach((containerItem) => {
      containerItem.column = columnCounter;
      columnCounter = columnCounter + 1;
    });
  }

  updateDraggableItemKeys() {
    let dragItemCounter = 1;
    this.layoutRows.forEach((row) => {
      row.containerItems.forEach((column) => {
        if (column.key === this.containerItemModelNumber) {
          column.dictionaryModel.draggableItems.forEach((item) => {
            item.key = dragItemCounter;
            dragItemCounter++;
          });
        }
      });
    });
  }
  //#endregion


  // Delete item from a tab template
  deleteItem(post) {
    for (const o in this.layoutRows[this.layoutRowsNumber].containerItems) {
      if (this.layoutRows[this.layoutRowsNumber].containerItems[o].key === this.containerItemModelNumber) {

        for (let i = 0; i < this.layoutRows[this.layoutRowsNumber].containerItems[o].dictionaryModel.draggableItems.length; i++) {
          if (this.layoutRows[this.layoutRowsNumber].containerItems[o].dictionaryModel.draggableItems[i].key === post) {
            this.layoutRows[this.layoutRowsNumber].containerItems[o].dictionaryModel.draggableItems.splice(i, 1);
          }
        }
      }
    }
    this.leftsidebarOpen = false;
    this.chosenFormSkeletonForEditing = null;
  }

  // When dragging over, remember which container and draggable item is hovered
  onDragEnter(columnNumber, item, container, k) {
    this.hoveredItem = item;
    this.hoveredItemKey = item.key;
    this.layoutRowsNumber = container;
    this.containerItemModelNumber = k;
  }

  // Next button click action
  editTabTemplate() {
    const a = JSON.stringify(this.mainTabTemplate);
    this.router.navigate(['/editTabTemplate'], { queryParams: { 'mainTabTemplate': a } });
  }

  // Save validation message for draggable item
  saveValidationModel(key) {
    // tslint:disable-next-line:forin
    for (const o in this.layoutRows[this.layoutRowsNumber].containerItems) {
      if (this.layoutRows[this.layoutRowsNumber].containerItems[o].key === this.containerItemModelNumber) {
        for (let i = 0; i < this.layoutRows[this.layoutRowsNumber].containerItems[o].dictionaryModel.draggableItems.length; i++) {
          if (this.layoutRows[this.layoutRowsNumber].containerItems[o].dictionaryModel.draggableItems[i].key === key) {
            if (this.changedValidationModel.valueToCompare !== '') {
              this.layoutRows[this.layoutRowsNumber].containerItems[o].dictionaryModel.draggableItems[i].value.validations.push(
                this.changedValidationModel);

            } else {
              alert('Please input valid text, for example url or email');
              return false;
            }
          }
        }
      }
      this.validationMessageCounter = this.validationMessageCounter + 1;
      return true;
    }
  }

  // Checkbox for selecting items for merginh
  onChangeSelect(k) {
    // tslint:disable-next-line:forin
    for (const i in this.layoutRows) {
      for (const j of this.layoutRows[i].containerItems) {
        if (j.key === k.key) {
          j.selectFlag = !j.selectFlag;
        }
      }
    }
  }



  // Click on item opens leftsidebar
  onClick(post: any, i: any, k: any) {
    let check = false;
    // Disable clicking on item if the container is selected
    // tslint:disable-next-line:forin
    for (const m in this.layoutRows) {
      for (const j of this.layoutRows[m].containerItems) {
        if (j.selectFlag === true) {
          if (k === j.key) {
            check = true;
          }
        }
      }
    }
    if (!check) {
      this.layoutRowsNumber = i;
      this.containerItemModelNumber = k;
      this.chosenFormSkeletonForEditing = post;
      this.leftsidebarOpen = true;
    }
  }

  // Changing url of an item in a leftsidebar
  changePicture(item) {
    for (const o in this.layoutRows[this.layoutRowsNumber].containerItems) {
      if (this.layoutRows[this.layoutRowsNumber].containerItems[o].key === this.containerItemModelNumber) {
        const lastOneUrl = item[1];
        for (let i = 0; i < this.layoutRows[this.layoutRowsNumber].containerItems[o].dictionaryModel.draggableItems.length; i++) {
          if (this.layoutRows[this.layoutRowsNumber].containerItems[o].dictionaryModel.draggableItems[i].key === item[0]) {
            this.layoutRows[this.layoutRowsNumber].containerItems[o].dictionaryModel.draggableItems[i].value.url = lastOneUrl;
          }
        }
      }
    }
  }

  // Old item stored
  getOldOne(post) {
    const oldItem = post.value;
    this.savedUnchangedFormSkeleton = new FormSkeleton(oldItem.dataType, oldItem.previewLabel,
      oldItem.exportLabel, oldItem.placeholder,
      oldItem.description, oldItem.options, oldItem.tableOptions,
      oldItem.required, oldItem.max,
      oldItem.min, oldItem.index,
      oldItem.editable, oldItem.url,
      oldItem.date, oldItem.validations);
  }


  subscribeOnDraggableMethods() {
    this.draggablesEvents.submitForItemTriggered.subscribe(item => this.saveData(item));
    this.draggablesEvents.submitForValidationTriggered.subscribe(item => this.saveValidationData(item));
    this.draggablesEvents.cancelForItemTriggered.subscribe(item => this.cancelChange(item));
    this.draggablesEvents.cancelForValidationTriggered.subscribe(item => this.cancelValidationChange(item));
    this.draggablesEvents.deleteItemTriggered.subscribe(item => this.deleteItem(item));
  }
}