import {
  Component,
  ElementRef,
  Input,
  HostBinding,
  HostListener,
} from '@angular/core';
import { XamTileManagerService } from '../xam-tile-manager/xam-tile-manager.service';

/**
 * Angular Component for the XamTile splitter.
 *
 * @export
 * @class XamTileSplitterComponent
 */
@Component({
  selector: 'wm-xam-tile-splitter',
  templateUrl: './xam-tile-splitter.component.html',
  styleUrls: ['./xam-tile-splitter.component.scss'],
})
export class XamTileSplitterComponent {
  /**
   * Current position of the splitter in the host grid
   *
   * @type {number}
   * @memberof XamTileSplitterComponent
   */
  public currentPosition: number = null;

  /**
   * Internal variable for the grid area to apply to the grid
   *
   * @private
   * @type {string}
   * @memberof XamTileSplitterComponent
   */
  private _gridArea: string = null;

  /**
   * Internal variable for the property isHorizontal
   *
   * @private
   * @type {boolean}
   * @memberof XamTileSplitterComponent
   */
  private _isHorizontal = false;

  /**
   * Gets the gridArea CSS property to apply.
   *
   * @type {string}
   * @memberof XamTileSplitterComponent
   */
  @Input()
  @HostBinding('style.gridArea')
  public get gridArea(): string {
    return this._gridArea;
  }

  /**
   * Sets the gridArea CSS property to apply.
   *
   * @memberof XamTileSplitterComponent
   */
  public set gridArea(value: string) {
    this._gridArea = value;
    this.calcPosition();
  }

  /**
   * If the value is true means that the splitter is in a horizontal position, otherwise is in vertical position.
   *
   * @type {boolean}
   * @memberof XamTileSplitterComponent
   */
  @Input()
  public get isHorizontal(): boolean {
    return this._isHorizontal;
  }

  /**
   * Sets the value for isHorizontal
   *
   * @memberof XamTileSplitterComponent
   */
  public set isHorizontal(value: boolean) {
    this._isHorizontal = !!value;
    this.calcPosition();
  }

  /**
   * Class to apply when the splitter is vertical (sticks to the right)
   *
   * @type {string}
   * @memberof XamTileSplitterComponent
   */
  @HostBinding('class.toRight')
  get toRight(): boolean {
    return !this.isHorizontal;
  }

  /**
   * Class to apply when the splitter is vertical (sticks to the bottom)
   *
   * @readonly
   * @type {boolean}
   * @memberof XamTileSplitterComponent
   */
  @HostBinding('class.toBottom')
  get toBottom(): boolean {
    return this.isHorizontal;
  }

  /**
   * To show or not border depending on if is transparent
   *
   * @readonly
   * @type {boolean}
   * @memberof XamTileSplitterComponent
   */
  @HostBinding('class.withBorder')
  get withBorder(): boolean {
    return !this.isTransparent;
  }

  /**
   * Flag to indicate the component should be transparent
   *
   * @private
   * @type {boolean}
   * @memberof XamTileSplitterComponent
   */
  @Input()
  public isTransparent = false;

  /**
   * Property to know if the splitter is moving.
   *
   * @type {boolean}
   * @memberof XamTileSplitterComponent
   */
  public isSplitterMoving = false;

  /**
   * Creates an instance of XamTileSplitterComponent.
   *
   * @param {ElementRef} element
   * @memberof XamTileSplitterComponent
   */
  constructor(
    private element?: ElementRef,
    private xamTileService?: XamTileManagerService
  ) {}

  /**
   * Calculates the current position where thes splitter is located
   *
   * @private
   * @memberof XamTileSplitterComponent
   */
  private calcPosition(): void {
    if (!!this.gridArea) {
      const idx = this.isHorizontal ? 0 : 1;
      this.currentPosition = Number.parseInt(this.gridArea.split('/')[idx]) - 1;
    } else this.currentPosition = null;
  }

  /**
   * Mousedown event handler.
   *
   * @memberof XamTileSplitterComponent
   */
  @HostListener('mousedown')
  mouseDownHandler(event: any): void {
    this.isSplitterMoving = true;
    this.xamTileService.notifyTileResizing(true);
  }
}