import { Component, Input, Injector, OnInit } from '@angular/core';
import {
  AngularComponentId,
  ComponentId,
  GridModel,
  TypeResolver,
} from '@mobilize/wms-framework';

@Component({
  selector: 'wm-grid-panel',
  templateUrl: './gridpanel.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush,
})
@ComponentId([AngularComponentId.gridPanel])
export class GridPanelComponent implements OnInit {
  @Input()
  public model: GridModel;

  isRefreshScheduled: boolean;
  nestedComponents: any[] = [];

  constructor(private injector: Injector) {}

  ngOnInit(): void {
    if (this.model) {
      this.model.attachedComponentInstance = this;
      this.refresh();
    }
  }

  public refresh(): void {
    if (!this.isRefreshScheduled) {
      this.isRefreshScheduled = true;
      setTimeout(() => {
        this.nestedComponents = this.calcNestedComponents();
        this.isRefreshScheduled = false;
      });
    }
  }

  calcNestedComponents(): any[] {
    if (this.model) {
      return this.model.Children.internalArray.map((child) => {
        const row = (child.getValue('grid_row_number') ?? 0) + 1;
        const column = (child.getValue('grid_column_number') ?? 0) + 1;
        return {
          style: {
            'grid-row': row,
            'grid-column': column,
          },
          customInjector: Injector.create({
            providers: [
              {
                provide: (child as any).constructor,
                useValue: child,
                deps: [],
              },
            ],
            parent: this.injector,
          }),
          component: TypeResolver.getType(child.AngularComponentId),
        };
      });
    } else {
      return [];
    }
  }

  public getCalculatedStyle(): any {
    let columns = '';
    if (this.model) {
      columns = this.model.ColumnDefinitions.internalArray
        .map((colDef) => colDef.Width.length.toString() + 'px')
        .join(' ');
    }
    let rows = '';
    if (this.model) {
      rows = this.model.RowDefinitions.internalArray
        .map((rowDef) => rowDef.Height.length.toString() + 'px')
        .join(' ');
    }
    if (columns === '') {
      columns = '100%';
    }

    if (rows === '') {
      rows = '100%';
    }
    const result = {
      display: 'grid',
      'grid-template-columns': columns,
      'grid-template-rows': rows,
      height: 'inherit',
      width: 'inherit',
    };

    return result;
  }
}