import {
  Directive,
  ElementRef,
  Host,
  HostBinding,
  Injector,
  Input,
  OnInit,
  Optional,
  SkipSelf,
} from '@angular/core';
import { FrameworkElement, GridModel } from '@mobilize/wms-framework';
import { GridComponent } from '../components';
import { GridService } from '../services/grid.service';
import { Utils } from '../utils';

/**
 * Angular directive for Grid column and row style.
 *
 * @export
 * @class GridDirective
 */
@Directive({
  selector: '[wmGrid]',
})
export class GridDirective implements OnInit {
  /**
   * Property used to set the grid column value.
   *
   * @type {number}
   * @memberof GridDirective
   */
  @Input() column: number;

  /**
   * Property used to set the grid column span value.
   *
   * @type {number}
   * @memberof GridDirective
   */
  @Input() columnSpan: number;

  /**
   * Property used to set the grid row value.
   *
   * @type {number}
   * @memberof GridDirective
   */
  @Input() row: number;

  /**
   * Property used to set the grid row span value.
   *
   * @type {number}
   * @memberof GridDirective
   */
  @Input() rowSpan: number;

  /**
   * Property used to save the control model.
   *
   * @type {*}
   * @memberof GridDirective
   */
  @Input() model: any;

  /**
   * save the element ref
   *
   * @type {*}
   * @memberof GridDirective
   */
  element: any;

  /**
   * Property used to save the GridService instance obtained from the injector.
   *
   * @private
   * @type {GridService}
   * @memberof GridDirective
   */
  private gridService: GridService;

  /**
   * Creates an instance of GridDirective.
   *
   * @memberof GridDirective
   */
  constructor(
    private injector: Injector,
    private elementRef: ElementRef,
    @SkipSelf() @Optional() @Host() private gridComponent: GridComponent
  ) {
    this.gridService = this.injector?.get(GridService);
  }

  /**
   * Sets the grid-row style.
   *
   * @readonly
   * @memberof GridDirective
   */
  @HostBinding('style.grid-row')
  get gridRowValue() {
    return Utils.getGridRowColumnStyle(
      this.row,
      this.rowSpan,
      this.getRowCount()
    );
  }

  /**
   * Sets the grid-column style.
   *
   * @readonly
   * @memberof GridDirective
   */
  @HostBinding('style.grid-column')
  get gridColumnValue() {
    return Utils.getGridRowColumnStyle(
      this.column,
      this.columnSpan,
      this.getColumnCount()
    );
  }

  /**
   * Returns the number of rows.
   *
   * @return {*}  {number}
   * @memberof GridDirective
   */
  getRowCount(): number {
    return this.gridComponent?.model?.RowDefinitions?.internalArray?.length;
  }

  /**
   * Returns the number of columns.
   *
   * @return {*}  {number}
   * @memberof GridDirective
   */
  getColumnCount(): number {
    return this.gridComponent?.model?.ColumnDefinitions.internalArray?.length;
  }

  /**
   * Angular lifecycle.
   *
   * @memberof GridDirective
   */
  ngOnInit(): void {
    /* istanbul ignore else */
    if (this.model instanceof FrameworkElement) {
      GridModel.SetRow(this.model, this.row);
      GridModel.SetRowSpan(this.model, this.rowSpan);
      GridModel.SetColumn(this.model, this.column);
      GridModel.SetColumnSpan(this.model, this.columnSpan);
    }
  }

  /**
   * Angular lifecycle.
   *
   * @memberof GridDirective
   */
  ngOnDestroy(): void {
    this.model = null;
    this.gridService = null;
    this.gridComponent = null;
  }
}