import { Button, TextField } from '@bryntum/scheduler/scheduler.umd.js';
import { Inject, Injectable, OnDestroy } from '@angular/core';
import { I18NEXT_SERVICE, ITranslationService } from 'angular-i18next';
import { Workbook } from 'exceljs/dist/exceljs.min.js';
import { saveAs } from 'file-saver';
import { MatSnackBar } from '@angular/material/snack-bar';
import { NotificationService } from '../core/services/notification.service';
import { TranslateService } from '@ngx-translate/core';
import { MatDialog } from '@angular/material/dialog';
import { ColumnSelectionToastComponent } from './toasts/column-selection-toast/column-selection.toast.component';
import { UserDataService } from '../core/services/user-data.service';
import { ServiceLocator } from '../core/services/locator.service';
import { SaveColumnStateFormComponent } from './toasts/save-column-state-toast/save.column-state.form';
import { DialogOperations } from './enum/enum.dialog.operations';
import { UltraBaseGridComponent } from './ultra.base.grid.component';
import { CustomGridState } from './interface/CustomGridState.interface';
import { of, Subject, Subscription } from 'rxjs';
import { delay, switchMap } from 'rxjs/operators';

@Injectable()
export class BaseGridComponent
  extends UltraBaseGridComponent
  implements OnDestroy
{
  counterElem;
  counterSearch;
  countFound;
  setColumnsWidth = false;
  reordering = false;
  settingDefaultColumnsState;
  searchField;
  config;
  filterItems;
  filterItemsTwoState;

  readonly _saveGrid = new Subject<boolean>();
  saveGridNow$ = this._saveGrid
    .asObservable()
    .pipe(switchMap(() => of(true).pipe(delay(2000))));
  saveGridSubscription: Subscription;

  defaultState: CustomGridState;
  mode: number;



  @Inject(MatDialog) protected dialog: MatDialog;
  @Inject(I18NEXT_SERVICE) protected i18NextService: ITranslationService;
  @Inject(MatSnackBar) protected snackBar: MatSnackBar;
  @Inject(NotificationService)
  protected notificationService: NotificationService;
  @Inject(TranslateService) protected translate: TranslateService;

  protected userDataService: UserDataService;

  constructor() {
    super();
    this.userDataService = ServiceLocator.injector.get(UserDataService);
    this.filterItems = [
      { value: 'Y', text: 'Yes', icon: 'yes_checkbox_state.png' },
      { value: 'N', text: 'No', icon: 'no_checkbox_state.png' },
      { value: 'null_value', text: 'Null', icon: 'null_checkbox_state.png' }
    ];

    this.filterItemsTwoState = [
      { value: 'Y', text: 'Yes', icon: 'yes_checkbox_state.png' },
      { value: 'N', text: 'No', icon: 'null_checkbox_state.png' }
    ];
  }
  ngOnDestroy(): void {
    this.saveGridSubscription?.unsubscribe();
  }

  setSavedColumnsWidth() {
    if (this.grid.columns) {
      const state = this.grid.getState();
      this.grid.columns.forEach((column) => {
        let width;
        // bug bryntum resizeToFitContent with checkbox column
        if (
          column.type === 'check' ||
          column.type === 'widget' ||
          column.type === 'template'
        ) {
          width = localStorage[column.id + 'width']
            ? +localStorage[column.id + 'width']
            : 60;
        } else if (
          !column.children &&
          !column.hidden &&
          column.type !== 'timeAxis'
        ) {
          if (localStorage[column.id + 'width']) {
            width = +localStorage[column.id + 'width'];
          } else {
            if (!column.flex) {
              const margin = 40; // margin to have enough space for the column filter
              const contentWidth = column.resizeToFitContent() + margin;
              if (contentWidth > 300) {
                width = 300;
              } else if (contentWidth) {
                width = contentWidth >= 60 ? contentWidth : 30;
              }
            }
          }
        }
        state.columns.find((columnState) => {
          if (columnState.id === column.id) {
            columnState.width = width;
            return true;
          } else if (columnState.children) {
            columnState.children.forEach((childState) => {
              if (childState.id === column.id) {
                childState.width = width;
                return true;
              }
            });
          } else {
            return false;
          }
        });
      });
      this.grid.applyState(state);
    }
  }

  saveColumnsWidth(data) {
    if (data.action === 'update' && data.changes.width) {
      Object.values(this.grid._columnStore.modified.idMap).forEach(
        (column: any) => {
          if (column.data.width) {
            localStorage[column.id + 'width'] = column.data.width;
          }
        }
      );
    }
  }

  // Deprecated : use handleGridState instead
  handleColumnsWidth() {
    // set width of columns on first row added
    this.grid.store.addListener({
      add: () => {
        if (!this.setColumnsWidth) {
          this.setSavedColumnsWidth();
          this.setColumnsWidth = true;
        }
      }
    });

    // save width of columns
    this.grid._columnStore.addListener({
      change: (data) => {
        if (this.setColumnsWidth) {
          this.saveColumnsWidth(data);
        }
      }
    });
  }

  reorderColumns() {
    this.reordering = true;
    const state = { columns: [] };
    let index = 0;
    let columnId = localStorage['column' + index + this.gridName];
    while (columnId) {
      let columnState;
      const column = this.grid._columnStore.idRegister[columnId];
      if (column && column.childLevel === 0) {
        // parent state
        columnState = {
          id: column.data.id,
          children: []
        };

        // children state
        if (localStorage['columnChildren' + column.data.id]) {
          localStorage['columnChildren' + column.data.id]
            .split(';')
            .forEach((childId) => {
              if (column.data.children.find((child) => child.id === childId)) {
                const child = this.grid._columnStore.idRegister[childId];
                columnState.children.push({
                  id: child.data.id
                });
              }
            });
        }

        state.columns.push(columnState);
      }
      index++;
      columnId = localStorage['column' + index + this.gridName];
    }

    this.grid.applyState(state);
    this.reordering = false;
  }

  saveColumnsOrder(action) {
    if (!this.reordering && action === 'add') {
      let index = 0;
      let parentId;
      this.grid.columns.forEach((column) => {
        if (column.childLevel === 0) {
          localStorage['column' + index + this.gridName] = column.data.id;
          index++;
          parentId = column.data.id;
          localStorage.removeItem('columnChildren' + parentId);
        } else {
          if (localStorage['columnChildren' + parentId]) {
            localStorage['columnChildren' + parentId] += ';' + column.data.id;
          } else {
            localStorage['columnChildren' + parentId] = column.data.id;
          }
        }
      });
    }
  }

  // Deprecated : use handleGridState instead
  handleColumnsOrder() {
    // reorder columns
    this.reorderColumns();

    // save order of columns
    this.grid._columnStore.addListener({
      change: ({ action }) => {
        this.saveColumnsOrder(action);
      }
    });
  }

  hideColumn(columnId) {
    const column = this.grid.columns.getById(columnId);
    if (column) {
      column.hide();
    }
  }

  hideColumns(defaultColumnsId?) {
    const hiddenColumns = localStorage.hiddenColumns
      ? JSON.parse(localStorage.hiddenColumns)
      : {};

    // default hidden columns
    if (
      defaultColumnsId &&
      !Object.keys(hiddenColumns).find(
        (hiddenColumnId) => hiddenColumnId === defaultColumnsId[0]
      )
    ) {
      defaultColumnsId.forEach((id) => {
        hiddenColumns[id] = 'hidden';
      });
      localStorage.hiddenColumns = JSON.stringify(hiddenColumns);
    }

    this.grid.columns.forEach((column) => {
      if (hiddenColumns[column.id] === 'hidden') {
        column.hide();
      }

      if (column.children) {
        column.children.forEach((child) => {
          if (hiddenColumns[child.id] === 'hidden') {
            child.hide();
          }
        });
      }
    });
  }

  saveColumnsVisibility(item, column) {
    // {nameColumn1: hidden, nameColumn2: nothidden, ...}
    const hiddenColumns = localStorage.hiddenColumns
      ? JSON.parse(localStorage.hiddenColumns)
      : {};
    if (item._ref === 'hideColumn') {
      const columnId = column.id;
      hiddenColumns[columnId] = 'hidden';
    } else if (item.column) {
      const columnId = item.column.id;
      hiddenColumns[columnId] = item.column.hidden ? 'hidden' : 'nothidden';
      if (item.column.children) {
        item.column.children.forEach((childColumn) => {
          hiddenColumns[childColumn.id] = item.column.hidden
            ? 'hidden'
            : 'nothidden';
        });
      }
    }
    localStorage.hiddenColumns = JSON.stringify(hiddenColumns);
  }

  // Deprecated : use handleGridState instead
  handleColumnsVisibility(defaultColumnsId?) {
    this.hideColumns(defaultColumnsId);

    // save visibility of columns
    this.grid.addListener({
      contextmenuitem: ({ column, item }) => {
        if (item._ref === 'hideColumn' || item.column) {
          this.saveColumnsVisibility(item, column);
        }
      }
    });
  }

  // must be call before new grid(config) as it modifies the config
  // must add "headerMenu : {items: {saveColumns: null, resetColumns: null}}" in features of the grid
  handleDefaultColumnsState(config) {
    this.addButtonDefaultColumnsHeaderMenu(config);
    // const savedState = localStorage['state' + this.gridName];
    // if (
    //   !Object.keys(localStorage).find((key) => key.includes(this.gridName)) &&
    //   !savedState &&
    //   this.defaultState?.grid_state
    // ) {
    //   this.setDefaultColumnsState(this.defaultState.grid_state);
    // }
  }

  addButtonDefaultColumnsHeaderMenu(config) {
    if (localStorage.preferences.includes('system')) {
      config.features.headerMenu.items.saveColumns = {
        text: this.translate.instant('grid.saveDefaultColumnsState'),
        icon: 'b-fa b-fa-save',
        onItem: () => {
          this.openSaveColumnStateDialog();
        },
        weight: 250
      };
    }
    config.features.headerMenu.items.resetColumns = {
      text: this.translate.instant('grid.defaultColumnsState'),
      icon: 'b-fa b-fa-undo',
      onItem: () => {
        this.resetColumnState();
      },
      weight: 250
    };
  }

  setDefaultColumnsState(columnsState) {
    this.settingDefaultColumnsState = true;
    if (columnsState.columns) {
      this.applyState(columnsState);
    } else {
      // Deprecated localstorage values
      Object.entries(columnsState).forEach(([key, value]) => {
        localStorage[key] = value;
      });

      // add a filter to optimize the reorder (bryntum very slow)
      this.grid.store.addFilter({
        id: 'boost',
        filterBy: () => false
      });
      this.grid._columnStore.forEach((column) => column.show());
      this.hideColumns();
      this.reorderColumns();
      this.grid.store.removeFilter('boost');
    }
    this.saveGridState();
    this.settingDefaultColumnsState = false;
  }

  handleGridState(defaultHiddenColumnIds?) {
    if (this.defaultState?.allow_column_selection === 'N') {
      const savedState = localStorage['state' + this.gridName];
      let orderedState;
      if (savedState) {
        const parsedSavedState = JSON.parse(savedState)?.columns.map(
          (c) => c.id
        );
        if (parsedSavedState) {
          orderedState = { ...this.defaultState.grid_state };
          orderedState.columns = [...orderedState.columns];
          orderedState.columns.sort((a, b) => {
            return (
              parsedSavedState.indexOf(a.id) - parsedSavedState.indexOf(b.id)
            );
          });
        }
      } else {
        orderedState = this.defaultState.grid_state;
      }
      this.applyState(orderedState);
    } else {
      const savedState = localStorage['state' + this.gridName]
        ? JSON.parse(localStorage['state' + this.gridName])
        : null;
      if (savedState) {
        this.applyState(savedState);
      } else {
        // Convert old localstorage values to state
        this.setSavedColumnsWidth();
        this.reorderColumns();
        this.hideColumns(defaultHiddenColumnIds);
        this.saveGridState();
      }
    }

    // save columns state
    this.grid._columnStore.addListener({
      update: () => {
        this._saveGrid.next(true);
      }
    });
    this.saveGridSubscription = this.saveGridNow$.subscribe(() =>
      this.saveGridState()
    );
  }

  saveGridState() {
    const state = this.grid.getState();
    state.scroll.scrollLeft.normal = 0;
    state.store.filters = [];

    // delete stuff from scheduler (or we get weird behavior)
    delete state.zoomLevelOptions;
    delete state.startDate;
    delete state.endDate;
    delete state.barMargin;
    delete state.zoomLevel;
    delete state.zoomLevelOptions;
    delete state.eventLayout;
    delete state.mode;
    delete state.tickSize;
    delete state.eventColor;
    delete state.eventStyle;
    delete state.fillTicks;
    localStorage['state' + this.gridName] = JSON.stringify(state);
  }

  // export by default the field of the column if no function excelValue defined
  // excelValue must return a string or false if the column don't need to be exported
  exportExcel(name) {
    this.notificationService.setIsLoadingExcel(true);
    const workbook = new Workbook();
    const worksheet = workbook.addWorksheet(name);

    // set columns
    const excelColumns = [];
    this.grid.columns.visibleColumns
      .filter((column) => column.data.excelValue !== false)
      .forEach((column) => {
        const excelColumn = { header: '', key: '', width: 0 };
        if (column.childLevel === 1) {
          excelColumn.header =
            this.grid.columns.getById(column.parentId).text +
            ' - ' +
            column.text;
        } else {
          excelColumn.header = column.text;
        }

        excelColumn.width = this.getActualColumnWidth(column);
        if (excelColumn.width < excelColumn.header.length) {
          excelColumn.width = excelColumn.header.length;
        }
        excelColumn.key = excelColumn.header;
        excelColumns.push(excelColumn);
      });
    worksheet.columns = excelColumns;

    // set header style
    worksheet.getRow(1).fill = {
      type: 'pattern',
      pattern: 'solid',
      fgColor: { argb: '103A60' }
    };
    worksheet.getRow(1).font = {
      color: { argb: 'FFFFFF' }
    };
    worksheet.getRow(1).border = {
      left: { style: 'thin', color: { argb: 'FFFFFF' } },
      right: { style: 'thin', color: { argb: 'FFFFFF' } }
    };
    worksheet.getRow(1).alignement = {
      vertical: 'middle'
    };

    // add rows
    const rows = [];
    this.grid.store.records.forEach((record) => {
      const row = [];
      this.grid.columns.visibleColumns.forEach((column) => {
        if (column.data.excelValue !== false) {
          if (
            column.data.excelColor !== undefined &&
            column.data.excelValue !== undefined
          ) {
            row.push({
              color: column.data.excelColor(record),
              excelValue: column.data.excelValue(record)
            });
          } else if (column.data.excelColor !== undefined) {
            row.push({
              color: column.data.excelColor(record)
            });
          }
          if (column.data.excelValue !== undefined) {
            row.push(column.data.excelValue(record));
          } else {
            if (column.data.excelColor !== undefined) {
            } else {
              row.push(record.data[column.data.field]);
            }
          }
        }
      });
      rows.push(row);
    });
    worksheet.addRows(rows);

    worksheet.eachRow(function (row) {
      row.eachCell(function (cell, colNumber) {
        if (cell?.value?.color) {
          row.getCell(colNumber).fill = {
            type: 'pattern',
            pattern: 'solid',
            fgColor: { argb: cell.value.color.replace(/^#/, '') }
          };
          row.getCell(colNumber).value = cell?.value?.excelValue ?? '';
        }
      });
    });

    // save xlsx
    workbook.xlsx.writeBuffer().then((data) => {
      const blob = new Blob([data], {
        type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
      });
      saveAs(blob, name + '.xlsx');
      this.notificationService.setIsLoadingExcel(false);
    });
  }

  handleColumnSelection(config) {
    if (
      !this.defaultState ||
      this.defaultState.allow_column_selection === 'Y'
    ) {
      config.features.headerMenu.items.filterColumns = {
        text: this.translate.instant('columnsSelection'),
        icon: 'b-fa b-fa-columns',
        onItem: () => {
          // get selected columns
          const gridState = this.grid.getState();
          const selectedColumns = gridState.columns.filter((column) => {
            column.text = this.grid.columns.allRecords.find(
              (record) => record.id === column.id
            ).text;
            return (
              !column.hidden ||
              (!column.parentId &&
                gridState.columns.some(
                  (c) => c.parentId === column.id && !c.hidden
                ))
            );
          });

          // get available columns
          const availableColumns = gridState.columns.filter((column) => {
            column.text = this.grid.columns.allRecords.find(
              (record) => record.id === column.id
            ).text;
            return (
              column.hidden ||
              (!column.parentId &&
                gridState.columns.some(
                  (c) => c.parentId === column.id && c.hidden
                ))
            );
          });

          const dialogRef = this.dialog.open(ColumnSelectionToastComponent, {
            width: '85%',
            height: '85%',
            data: { availableColumns, selectedColumns }
          });

          dialogRef.afterClosed().subscribe((selectedColumns) => {
            if (selectedColumns && selectedColumns.length > 0) {
              const state = this.grid.getState();
              this.sortStateColumns(
                state.columns,
                selectedColumns.map((sc) => sc.data.id)
              );
              state.columns.forEach((stateColumn) => {
                const selectedColumn = selectedColumns.find(
                  (sc) => sc.data.id === stateColumn.id
                );
                if (!selectedColumn) {
                  stateColumn.hidden = true;
                  /** Not needed anymore because of update bryntum 5.6.12 */
                  // if (stateColumn.children) {
                  //   stateColumn.children.forEach(
                  //     (child) => (child.hidden = true)
                  //   );
                  // }
                } else {
                  stateColumn.hidden = false;
                  /** Not needed anymore because of update bryntum 5.6.12 */
                  // if (stateColumn.children) {
                  //   this.sortStateColumns(
                  //     stateColumn.children,
                  //     selectedColumn.children.map((scc) => scc.id)
                  //   );
                  //   stateColumn.children.forEach((child) => {
                  //     child.hidden =
                  //       selectedColumn.children.find(
                  //         (scc) => scc.id === child.id
                  //       ) === undefined;
                  //   });
                  // }
                }
              });
              this.applyState(state);
              this.saveGridState();
            }
          });
        },
        weight: 150
      };
    }
  }

  sortStateColumns(stateColumns, sortedColumnIds) {
    stateColumns.sort((c1, c2) => {
      const c1Index = sortedColumnIds.findIndex((id) => id === c1.id);
      const c2Index = sortedColumnIds.findIndex((id) => id === c2.id);
      if (c1Index && c2Index) {
        return c1Index - c2Index;
      } else if (c1Index) {
        return 1;
      } else if (c2Index) {
        return -1;
      } else {
        return 0;
      }
    });
  }

  applyState(state) {
    // hide new columns
    this.hideNewColumns(state);

    this.grid.features.filterBar.toggleFilterBar(); // Bryntum bug : duplicate filter bar
    this.grid.applyState(state);
    this.grid.features.filterBar.toggleFilterBar();
  }

  hideNewColumns(state) {
    this.grid.columns.data.forEach((column) => {
      const stateColumn = state.columns.find(
        (stateColumn) => stateColumn.id === column.id
      );
      if (!stateColumn) {
        state.columns.push({ id: column.id, hidden: true });
      } else {
        if (column.children) {
          column.children.forEach((child) => {
            if (!stateColumn.children) {
              stateColumn.children = [];
            }
            if (
              !stateColumn.children.find(
                (stateChild) => stateChild.id === child.id
              )
            ) {
              stateColumn.children.push({ id: child.id, hidden: true });
            }
          });
        }
      }
    });
  }

  // make a free search for the grid in the element appendToID
  makeFreeSearch(appendToID) {
    this.counterElem = document.createElement('div');
    this.counterElem.style =
      'color: rgb(97, 97, 97, 0.8); font-size: 11px; padding-right:5px; padding-top:1px;';
    this.counterSearch = 1;
    this.countFound = 0;
    this.searchField = new TextField({
      appendTo: appendToID,
      //icon     : 'b-icon b-icon-search',
      id: appendToID + 'field',
      style: 'width: 200px; color: black',
      placeholder: 'Search',
      listeners: {
        input: () => {
          this.grid.features.search.search(this.searchField.value);
          this.searchField.focus(); // grid search deselect searchfield
          if (this.grid.features.search.foundCount > 0) {
            if (this.searchField.value !== '') {
              this.counterSearch = 1;
              this.countFound = 0;

              // count total rows found
              let previousHitId;
              this.grid.features.search.found.forEach((hit) => {
                if (previousHitId !== hit.id) {
                  this.countFound++;
                  previousHitId = hit.id;
                }
              });

              this.counterElem.textContent =
                this.counterSearch + '/' + this.countFound;
            } else {
              this.counterElem.textContent = '';
            }
          } else {
            this.counterElem.textContent = '0/0';
          }
        }
      }
    });
    this.searchField.element.firstElementChild.insertAdjacentElement(
      'beforeend',
      this.counterElem
    );
    new Button({
      icon: 'b-fa-arrow-up',
      appendTo: this.searchField.element.childNodes[0] as HTMLElement,
      cls: 'b-icon twinkle-grey previousNextButton',
      listeners: {
        click: () => {
          if (this.searchField.value !== '' && this.counterSearch !== 1) {
            this.grid.features.search.gotoPrevHit();
            this.counterSearch--;
            this.counterElem.textContent =
              this.counterSearch + '/' + this.countFound;
          }
        }
      }
    });
    new Button({
      icon: 'b-fa-arrow-down',
      appendTo: this.searchField.element.childNodes[0] as HTMLElement,
      cls: 'b-icon twinkle-grey previousNextButton',
      style: 'margin-right: 6px',
      listeners: {
        click: () => {
          if (
            this.searchField.value !== '' &&
            this.counterSearch !== this.countFound
          ) {
            this.grid.features.search.gotoNextHit();
            this.counterSearch++;
            this.counterElem.textContent =
              this.counterSearch + '/' + this.countFound;
          }
        }
      }
    });
  }

  parentColumnFilterFn(property, record, value) {
    if (record.isLeaf) {
      const parentRecord = this.grid.store.getById(record.parentId);
      return (
        value !== null &&
        parentRecord.data[property] !== null &&
        parentRecord.data[property]
          .toString()
          .toLowerCase()
          .includes(value.toString().toLowerCase())
      );
    } else {
      return (
        value !== null &&
        record.data[property] !== null &&
        record.data[property]
          .toString()
          .toLowerCase()
          .includes(value.toString().toLowerCase())
      );
    }
  }

  removeColumnsById(ColumnsIds) {
    this.config.columns = this.config.columns.filter(
      (column) => !ColumnsIds.find((element) => column.id === element)
    );

    this.config.columns = this.config.columns.map((column) => {
      if (column.children) {
        column.children = column.children.filter(
          (columnChildren) =>
            !ColumnsIds.find((element) => columnChildren.id === element)
        );
      }
      return column;
    });
  }

  openSaveColumnStateDialog() {
    const saveColumnDialogRef = this.dialog.open(SaveColumnStateFormComponent, {
      width: '300px',
      height: '325px'
    });

    saveColumnDialogRef.afterClosed().subscribe(({ operation, formResult }) => {
      if (operation === DialogOperations.confirm) {
        this.userDataService
          .postGridState(JSON.stringify(this.grid.getState()), this.gridName, {
            vo_role_id: formResult.vo_role_id,
            vo_legal_entity_id: formResult.vo_legal_entity_id,
            allow_column_selection: formResult.allowColumnSelection,
            is_default: formResult.isDefaultState,
            screen_mode: this.mode
          })
          .subscribe(
            () => {
              this.snackBar.open(
                this.translate.instant('grid.defaultColumnsStateSaved'),
                undefined,
                { panelClass: ['snackBar', 'savedSnackBar'], duration: 2000 }
              );
            },
            (error) => {
              this.notificationService.errorToast(
                'save payroll lines default columns state',
                error
              );
            }
          );
      }
    });
  }

  resetColumnState() {
    if (this.defaultState) {
      this.setDefaultColumnsState(this.defaultState.grid_state);
      this.snackBar.open(
        this.translate.instant('grid.defaultColumnsStateSet'),
        undefined,
        { panelClass: 'snackBar', duration: 2000 }
      );
    } else {
      this.snackBar.open(
        this.translate.instant('grid.noDefaultColumnsState'),
        undefined,
        { panelClass: 'snackBar', duration: 2000 }
      );
    }
  }

  applyDefaultConfig(config) {
    super.applyDefaultConfig(config);
    this.defaultState = this.userDataService.getGridState(
      this.gridName,
      this.mode
    );
    if (this.defaultState?.allow_column_selection === 'N') {
      config.features.headerMenu.items.columnPicker = false;
      config.features.headerMenu.items.hideColumn = false;
    }
  }

  getActualColumnWidth(column) {
    const ratioExcelBryntumWidth = 5;
    if (typeof column.width === 'number') {
      return column.data.width / ratioExcelBryntumWidth;
    } else {
      let columnWidth: string = column.width;
      let endsWith: string = columnWidth.charAt(columnWidth.length - 1);
      let actualSize: number = 0;
      if (endsWith === 'x') {
        actualSize = +columnWidth.slice(0, columnWidth.length - 2);
      } else if (endsWith === 'm') {
        actualSize = +columnWidth.slice(0, columnWidth.length - 2);
        actualSize = Math.ceil(actualSize * 2);
      } else if (endsWith === '%') {
        actualSize = +window.screen.width;
        let factor = +columnWidth.slice(0, columnWidth.length - 1);
        actualSize = Math.ceil(actualSize * (factor / 100));
      }
      return actualSize / ratioExcelBryntumWidth;
    }
  }

  getCheckboxFilterable(attribute,threeState : boolean) {
    return {
      filterField: {
        type: 'combo',
        editable: false,
        items: threeState ? this.filterItems : this.filterItemsTwoState,
        autoComplete: 'new-password',
        listItemTpl: (item) => {
          return `<img style='padding-right:10px; min-width:26px; width:26px' src='../assets/images/${
            item.data.icon
          }'>                 ${this.translate.instant(
            'personList.' + item.data.text
          )}`;
        },
        displayValueRenderer: (record) => {
          return record
            ? this.translate.instant('personList.' + record.text)
            : '';
        },
        pickerWidth: this.pickerWidthCombo
      },
      filterFn: ({ record, value }) => {
        const filterValue = value === 'null_value' ? null : value;
        return filterValue === record[attribute];
      }
    }
  }
}