import { Injector, Renderer2 } from '@angular/core';
import {
  Cursor,
  CursorType,
  DependencyProperty,
  FontStyles,
  FontWeights,
  FrameworkElement,
  HorizontalContentAlignment,
  Key,
  KeyEventArgs,
  LinearGradientBrush,
  setDependencyPropertyValue,
  SmColor,
  smColorToCssColor,
  SolidColorBrush,
  ThicknessModel,
  TypeResolver,
  UIElement,
  VerticalContentAlignment,
} from '@mobilize/wms-framework';
import {
  HorizontalAlignment,
  IgxOverlayService,
  VerticalAlignment,
} from 'igniteui-angular';
import {
  differenceWith as loDifferenceWith,
  isEqual as loIsEqual,
} from 'lodash';

/**
 * Class with utilities.
 *
 * @export
 * @class Utils
 */
export class Utils {
  /**
   * Compare two objects and update the first one with the second one
   *
   * @static
   * @param {*} obj1 First object to update
   * @param {*} obj2 Second object to get new values
   * @return {*}  {*} returns the first object updated
   * @memberof Utils
   */
  static mergeObjects(obj1: any, obj2: any): any {
    if (obj1 == null) {
      obj1 = {};
    }
    for (const prop in obj2) {
      if (typeof obj2[prop] === 'object') {
        Utils.mergeObjects(obj1[prop], obj2[prop]);
      } else {
        if (obj2[prop] !== obj1[prop]) {
          obj1[prop] = obj2[prop];
        }
      }
    }
    return obj1;
  }

  /**
   * Merge model items and static items into a singl arrys
   *
   * @param {any[]} modelItems
   * @param {any[]} staticControls
   * @param {boolean} isReady
   * @param {Injector} injector
   * @type {any[]}
   * @memberof Utils
   */
  static mergeItems(
    modelItems: any[],
    staticControls: any[],
    isReady: boolean,
    injector: Injector
  ): any[] {
    if (!isReady && !modelItems) return;
    const staticCtrlModels = staticControls.map((x) => x.model);
    const mergedArray = Utils.arrayUnion(staticCtrlModels, modelItems);
    return Utils.getUIControls(mergedArray, injector);
  }

  /**
   * Return static items that are not present in the model.
   * (Needs to be checked, there are some implementations that staticControls parameters is not an array)
   *
   * @param {any[]} modelItems
   * @param {any} staticControls
   * @param {boolean} isReady
   * @param {Injector} injector
   * @type {any[]}
   * @memberof Utils
   */
  static getDynamicUIElements(
    modelItems: any[],
    staticControls: any,
    isReady: boolean,
    injector: Injector
  ): any[] {
    let newControlsToRender = [];
    if (isReady && modelItems) {
      const staticCtrlModels = staticControls.map((x: any) => x.model);
      newControlsToRender = Utils.differenceWith(modelItems, staticCtrlModels);
      /* istanbul ignore else */
      if (newControlsToRender && newControlsToRender.length > 0) {
        // Returns the list of dynamic components to be render
        return Utils.getUIControls(newControlsToRender, injector);
      }
    }
  }

  /**
   * True if the value is a Hex (hex of 6 or 8 characters are allowed) otherwise false
   *
   * @param  {string} color
   * @returns boolean
   */
  static isHexColor(color: string): boolean {
    return (
      color &&
      color.indexOf('#') === 0 &&
      (color.length === 7 || color.length === 9)
    );
  }

  /**
   * Parse Hex value (hex of 6 or 8 characters are allowed) to a SmColor by
   * getting the ARGB equivalents
   *
   * @param  {string} hexValue
   * @returns SmColor
   */
  static parseToAarrggbb(hexValue: string): SmColor {
    if (!hexValue) {
      return null;
    }

    //The length includes the initial character '#'
    const cont = hexValue.length === 7 ? 0 : 2;
    const b = parseInt(hexValue.substring(5 + cont, 7 + cont), 16);
    const g = parseInt(hexValue.substring(3 + cont, 5 + cont), 16);
    const r = parseInt(hexValue.substring(1 + cont, 3 + cont), 16);
    const a = cont === 2 ? parseInt(hexValue.substring(1, 3), 16) : 255;
    const color = new SmColor();
    color.A = a;
    color.B = b;
    color.R = r;
    color.G = g;
    return color;
  }

  /**
   * Converts the color name to a SmColor by using
   * a temporal canvas element
   *
   * @static
   * @param {string} colorName
   * @return {*}  {SmColor}
   * @memberof Utils
   */
  static colorToARGB(colorName: string): SmColor {
    if (!colorName) {
      return null;
    }
    const canvas = document.createElement('canvas');
    canvas.height = 1;
    canvas.width = 1;
    const context = canvas.getContext('2d');
    context.fillStyle = colorName;
    context.fillRect(0, 0, canvas.width, canvas.height);
    const rgbaArray = context.getImageData(
      0,
      0,
      canvas.width,
      canvas.height
    ).data;
    const color = new SmColor();
    color.R = rgbaArray[0];
    color.G = rgbaArray[1];
    color.B = rgbaArray[2];
    color.A = rgbaArray[3] != null ? rgbaArray[3] : 255;
    return color;
  }

  /**
   * Creates an object of type SmColor
   *
   * @static
   * @param {string} value
   * @return {*}  {SmColor}
   * @memberof Utils
   */
  static createSmColor(value: string): SmColor {
    if (this.isHexColor(value)) {
      return this.parseToAarrggbb(value);
    }
    return this.colorToARGB(value);
  }

  /**
   * Creates an object of type SolidColorBrush
   *
   * @static
   * @param {*} color
   * @return {*}  {SolidColorBrush}
   * @memberof Utils
   */
  static createSolidBrush(color: any): SolidColorBrush {
    // Currently not supported linear gradient brush processing
    if (color == null || color instanceof LinearGradientBrush) {
      return null;
    }
    if (color instanceof SolidColorBrush) {
      return color;
    }
    if (!(color instanceof SmColor)) {
      color = this.createSmColor(color);
    }
    const sb = new SolidColorBrush();
    sb.Color = color;
    return sb;
  }

  /**
   * Verify if two objects are equal or not
   *
   * @param  {any} first First item for comparisson
   * @param  {any} second Second item for comparisson
   * @returns boolean True if are equal otherwise false
   */
  static isEqual(first: any, second: any): boolean {
    return loIsEqual(first, second);
  }

  /**
   * Gets the differences in arrays
   *
   * @param  {any} array1 The array to inspect
   * @param  {any} array2 The array to exclude
   * @returns any Returns the new array of filtered values
   */
  static differenceWith(array1: any, array2: any): any {
    return loDifferenceWith(array1, array2, loIsEqual);
  }

  /**
   * Merge two arrays into one, deleting the duplicates in the process.
   *
   * @param  {any[]} array1
   * @param  {any[]} array2
   * @returns {any[]} Returns the new array of filtered values
   */
  static arrayUnion(array1: any[], array2: any[]): any[] {
    return array2.length === 0
      ? array1
      : Array.from(new Set([...array1, ...array2]));
  }

  /**
   * Generates the dynamic components
   *
   * @param  {any} source The list of model controls
   * @param  {Injector} injector The injector reference
   * @returns {any[]} A collection of components
   */
  static getUIControls(source: any, injector: Injector): any[] {
    const returnedControls = [];
    const total = source.count ? source.count : source.length;
    for (let i = 0; i < total; i++) {
      let tmpItem = source.getItem ? source.getItem(i) : source[i];
      /* istanbul ignore else */
      if (tmpItem) {
        let component = tmpItem.constructor;
        /* istanbul ignore else */
        if (tmpItem.AngularComponentId && typeof tmpItem.AngularComponentId) {
          component = Utils.resolveComponentType(tmpItem);
        } else if (tmpItem.model?.AngularComponentId) {
          component = Utils.resolveComponentType(tmpItem.model);
          tmpItem = tmpItem.model;
        }
        const customInjector = Utils.createInjectorForDynamicComponent(
          tmpItem,
          injector
        );
        returnedControls.push({
          item: tmpItem,
          component,
          customInjector,
        });
      }
    }
    return returnedControls;
  }

  /**
   *  Creates an injector for a model
   *
   * @protected
   * @param {*} modelToInject
   * @return {*}
   * @memberof BaseComponent
   */
  static createInjectorForDynamicComponent(
    modelToInject: any,
    parentInjector: Injector
  ): Injector {
    // Consider the scenario where a control model has a control template model
    // in this case we need to use the template model instead of the main model
    const avoidDynamicContentTemplateResolution =
      modelToInject?.avoidTemplateModelResolution === true;
    const templateModel = !avoidDynamicContentTemplateResolution
      ? modelToInject?.templateModel
      : null;
    const modelToUse = templateModel ?? modelToInject;
    const modelClassToUse =
      templateModel?.constructor ?? modelToInject.constructor;
    return Injector.create({
      providers: [
        {
          provide: modelClassToUse,
          useValue: modelToUse,
          deps: [],
        },
      ],
      parent: parentInjector,
    });
  }

  /**
   * Resolves the component type for a component model
   *
   * @static
   * @param {*} model
   * @return {*}
   * @memberof Utils
   */
  static resolveComponentType(model: any): any {
    const avoidDynamicContentTemplateResolution =
      model?.avoidTemplateModelResolution === true;
    if (
      model?.templateModel?.AngularComponentId &&
      !avoidDynamicContentTemplateResolution
    ) {
      return TypeResolver.getType(model.templateModel.AngularComponentId);
    } else if (model.AngularComponentId) {
      return TypeResolver.getType(model.AngularComponentId);
    } else {
      return null;
    }
  }

  /**
   * Converts the first character to lowerCase.
   *
   * @static
   * @param {string} prop - string to change
   * @return {*}  {string}
   * @memberof Utils
   */
  static getCamelCaseName(prop: string): string {
    return prop.charAt(0).toLowerCase() + prop.slice(1);
  }

  /**
   * Converts the first character to UpperCase.
   *
   * @static
   * @param {string} prop - string to change
   * @return {*}  {string}
   * @memberof Utils
   */
  static getUpperCaseName(prop: string): string {
    return prop.charAt(0).toUpperCase() + prop.slice(1);
  }

  /**
   * Determines if the user is using firefox browser.
   *
   * @static
   * @return {*}  {boolean}
   * @memberof Utils
   */
  static isFirefoxBrowser(): boolean {
    return navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
  }

  /**
   * Verifies if the items collections contains UIElements to be rendered
   *
   * @returns boolean True if the collection contains UIElements otherwise false
   */
  static containsUIElement(collection: any): boolean {
    /* istanbul ignore else */
    if (collection && collection.count > 0) {
      for (let i = 0; i < collection.count; i++) {
        if (collection.getItem(i) instanceof UIElement) {
          return true;
        }
      }
    }
    return false;
  }

  /**
   * Compare if two array are equals using the Object.is
   *
   * @param {any[]} array1
   * @param {any[]} array2
   * @return {*}  {boolean} - returns true if the array are equals
   * @memberof Utils
   */
  static areSameElements(array1: any[], array2: any[]): boolean {
    if (array1?.length !== array2?.length) {
      return false;
    }
    for (let index = 0; index < array1.length; index++) {
      // please check compatibility browser in https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is
      if (!Object.is(array1[index], array2[index])) {
        return false;
      }
    }
    return true;
  }

  /**
   * Returns the correct style format for the Grid Row or Column to behave the same as Silverlight.
   *
   * @static
   * @param {number} value - RowValue or ColumnValue.
   * @param {number} spanValue - RowSpanValue or ColumnSpanValue.
   * @param {number} count - Number of rows or columns.
   * @return {*}  {string}
   * @memberof Utils
   */
  static getGridRowColumnStyle(
    value: number,
    spanValue: number,
    count: number
  ): string {
    const hasSpan = typeof spanValue === 'number' && spanValue > 0;
    count = typeof count !== 'number' || count <= 0 ? 1 : count;
    const valueCalc = value + 1 <= count ? value + 1 : count;
    const positionValue = typeof value === 'number' ? valueCalc : 1;
    const availableSpanSpace = hasSpan ? count - positionValue + 1 : count;
    const positionSpanValue =
      hasSpan && spanValue > availableSpanSpace
        ? availableSpanSpace
        : spanValue;
    return hasSpan
      ? `${positionValue} / span ${positionSpanValue}`
      : `${positionValue}`;
  }

  /**
   * Returns an instance of KeyEventArgs based on the definition of the KeyBoardEvent to behave the same as Silverlight.
   *
   * @static
   * @param {KeyboardEvent} event - The original KeyBoardEvent.
   * @return {KeyEventArgs}
   * @memberof Utils
   */
  static getKeyEventArgs(event: KeyboardEvent): KeyEventArgs {
    const args = new KeyEventArgs();
    //Sets the Key enum
    args.Key = Key[event.code] ?? Key[event.key];
    if (!args.Key) {
      args.Key = Key.Unknown;
    }
    //Sets the PlatFormKeyCode
    args.PlatformKeyCode = event.keyCode;
    //Sets the OriginalSource
    args.OriginalSource = event.target;
    args.OriginalEvent = event;
    return args;
  }

  /**
   * Returns the correct CSS Cursor name based on a Silverlight Cursor.
   *
   * @static
   * @param {Cursor} cursor
   * @return {*}  {string}
   * @memberof Utils
   */
  static cssCursorName(cursor: Cursor): string {
    let cursorName = '';
    switch (CursorType[cursor?.toString()]) {
      case CursorType.Hand:
        cursorName = 'pointer';
        break;
      case CursorType.IBeam:
        cursorName = 'text';
        break;
      case CursorType.None:
        cursorName = 'none';
        break;
      case CursorType.SizeNESW:
        cursorName = 'nesw-resize';
        break;
      case CursorType.SizeNS:
        cursorName = 'ns-resize';
        break;
      case CursorType.SizeNWSE:
        cursorName = 'nwse-resize';
        break;
      case CursorType.SizeWE:
        cursorName = 'ew-resize';
        break;
      case CursorType.Stylus:
        cursorName = 'url';
        break;
      case CursorType.Wait:
        cursorName = 'wait';
        break;
      case CursorType.Arrow:
      case CursorType.Eraser:
      default:
        cursorName = 'inherit';
        break;
    }
    return cursorName;
  }

  /**
   * Returns the correct Font Name based on a Silverlight font name.
   *
   * @static
   * @param {Fontweights} fontweight
   * @return {*}  {string}
   * @memberof Utils
   */
  static getFontWeight(fontweight: any): string {
    const processFontWeigth =
      Number(fontweight) >= 0 ? FontWeights[fontweight] : fontweight;
    let weight = '';
    switch (processFontWeigth) {
      case FontWeights[FontWeights.Black]:
        break;
      case FontWeights[FontWeights.Bold]:
        weight = 'bold';
        break;
      case FontWeights[FontWeights.ExtraBold]:
        weight = 'bolder';
        break;
      case FontWeights[FontWeights.Light]:
        weight = 'lighter';
        break;
      case FontWeights[FontWeights.ExtraLight]:
        weight = '200';
        break;
      case FontWeights[FontWeights.SemiBold]:
        weight = '600';
        break;
      case FontWeights[FontWeights.SemiLight]:
        weight = '300';
        break;
      case FontWeights[FontWeights.Thin]:
        weight = '100';
        break;
      default:
        weight = 'Normal';
        break;
    }
    return weight;
  }

  /**
   * Returns the correct Font Style based on a Silverlight font style.
   *
   * @static
   * @param {Fontweights} fontStyle
   * @return {*}  {string}
   * @memberof Utils
   */
  static getFontStyle(fontStyle: any): string {
    let style = '';
    const theFontStyle =
      Number(fontStyle) >= 0 ? FontStyles[fontStyle] : fontStyle;
    switch (theFontStyle) {
      case FontStyles[FontStyles.Normal]:
        break;
      case FontStyles[FontStyles.Italic]:
        style = 'italic';
        break;
      default:
        style = 'normal';
        break;
    }
    return style;
  }

  /**
   * Method that returns the component to render
   *
   * @return {any}
   * @memberof Utils
   */
  static getDynamicComponent(contentValue: any, injector: Injector): any {
    /* istanbul ignore else */
    if (contentValue instanceof UIElement) {
      const tmpItem = contentValue;
      let component = tmpItem.constructor;
      /* istanbul ignore else */
      if (typeof tmpItem.AngularComponentId) {
        component = Utils.resolveComponentType(tmpItem);
      }
      const customInjector = Utils.createInjectorForDynamicComponent(
        tmpItem,
        injector
      );
      return {
        item: tmpItem,
        component,
        customInjector,
      };
    }
  }

  /**
   * Validate property values and return status
   *
   * @static
   * @param {DependencyProperty} property
   * @param {*} bindingObjectCandidate
   * @param {*} modelProxy
   * @param {*} pendingSetValues
   * @return {*}  {boolean}
   * @memberof Utils
   */
  static validateCompatibilityBindings(
    property: DependencyProperty,
    bindingObjectCandidate: any,
    modelProxy: any,
    pendingSetValues: any
  ): boolean {
    if (
      bindingObjectCandidate &&
      typeof bindingObjectCandidate === 'object' &&
      bindingObjectCandidate.bindingPath
    ) {
      if (
        modelProxy instanceof FrameworkElement &&
        pendingSetValues.length === 0
      ) {
        setDependencyPropertyValue(
          property,
          bindingObjectCandidate,
          modelProxy
        );
      } else {
        pendingSetValues.push([property, bindingObjectCandidate]);
      }
      return true;
    } else if (
      bindingObjectCandidate &&
      typeof bindingObjectCandidate.resourceKey === 'string'
    ) {
      pendingSetValues.push([property, bindingObjectCandidate]);
      return true;
    } else {
      return false;
    }
  }

  /**
   * Sets wm format attribute to QM
   *
   * @static
   * @param igxDateOrTimeComponent igx date or time component reference
   * @param context Current component context
   */
  static setWmFormatAttribute(
    igxDateOrTimeComponent: any,
    context: any,
    append?: boolean
  ): void {
    /* istanbul ignore else */
    if (igxDateOrTimeComponent && igxDateOrTimeComponent.dateTimeEditor) {
      context.wmFormat =
        append && context.wmFormat
          ? `${context.wmFormat} ${igxDateOrTimeComponent.dateTimeEditor.inputFormat}`
          : igxDateOrTimeComponent.dateTimeEditor.inputFormat;
    }
  }

  static getBorderThickness(border: ThicknessModel, defaultThickness: number) {
    if (border) {
      const top = border.Top;
      const bottom = border.Bottom;
      const left = border.Left;
      const right = border.Right;
      return `${top}px ${right}px ${bottom}px ${left}px`;
    } else {
      return `${defaultThickness}px`;
    }
  }

  /**
   * Gets the css equivalent color
   *
   * @static
   * @param {*} color
   * @returns
   * @memberof Utils
   */
  static getCssColor(color: any) {
    if (color instanceof SolidColorBrush) {
      return smColorToCssColor(color.Color);
    } else if (color instanceof SmColor) {
      return smColorToCssColor(color);
    } else {
      return null;
    }
  }

  /**
   * Adjust displayed dropDown to fit the Window if is overflow
   *
   * @static
   * @param {Element} overlay
   * @param {string} overlayId
   * @param {IgxOverlayService} overlayService
   * @memberof Utils
   */
  static adjustDropDownToWindow(
    overlay: Element,
    overlayId: string,
    overlayService: IgxOverlayService
  ) {
    const overlayInfo = overlayService.getOverlayById(overlayId);
    const settings = overlayInfo.settings.positionStrategy.clone().settings;
    const rect = overlay.getBoundingClientRect();
    let requiredReposition = false;
    if (
      rect.left >= 0 &&
      rect.right >= (window.innerWidth || document.documentElement.clientWidth)
    ) {
      settings.horizontalDirection = HorizontalAlignment.Left;
      settings.horizontalStartPoint = HorizontalAlignment.Right;
      requiredReposition = true;
    }
    if (
      rect.top >= 0 &&
      rect.bottom >=
        (window.innerHeight || document.documentElement.clientHeight)
    ) {
      settings.verticalDirection = VerticalAlignment.Top;
      settings.verticalStartPoint = VerticalAlignment.Top;
      requiredReposition = true;
    }
    if (requiredReposition) {
      overlayInfo.settings.positionStrategy.settings = settings;
      overlayService.reposition(overlayId);
    }
  }

  /**
   * Returns the correct Vertical Alignment Style based on a Silverlight Vertical Content Alignment style.
   *
   * @static
   * @param {any} verticalAlignment
   * @return {*}  {string}
   * @memberof Utils
   */
  static getVerticalContentAlignment(verticalAlignment: any): string {
    let style = '';
    const theVerticalContentAlignmentStyle =
      Number(verticalAlignment) >= 0
        ? VerticalContentAlignment[verticalAlignment]
        : verticalAlignment;
    switch (theVerticalContentAlignmentStyle) {
      case VerticalContentAlignment[VerticalContentAlignment.Bottom]:
        style = 'flex-end';
        break;
      case VerticalContentAlignment[VerticalContentAlignment.Top]:
        style = 'flex-start';
        break;
      case VerticalContentAlignment[VerticalContentAlignment.Center]:
        style = 'center';
        break;
      default:
        style = 'stretch';
        break;
    }
    return style;
  }

  /**
   * Returns the correct Horizontal Alignment Style based on a Silverlight Horizontal Content Alignment style.
   *
   * @static
   * @param {any} horizontalAlignment
   * @return {*}  {string}
   * @memberof Utils
   */
  static getHorizontalContentAlignment(horizontalAlignment: any): string {
    let style = '';
    const theHorizontalContentAlignmentStyle =
      Number(horizontalAlignment) >= 0
        ? HorizontalContentAlignment[horizontalAlignment]
        : horizontalAlignment;
    switch (theHorizontalContentAlignmentStyle) {
      case HorizontalContentAlignment[HorizontalContentAlignment.Left]:
        style = 'left';
        break;
      case HorizontalContentAlignment[HorizontalContentAlignment.Right]:
        style = 'right';
        break;
      case HorizontalContentAlignment[HorizontalContentAlignment.Center]:
        style = 'center';
        break;
      default:
        style = 'stretch';
        break;
    }
    return style;
  }

  /**
   * Add a class to the opened overlay so it can be identified for css as part of this control
   *
   * @static
   * @param {string} className
   * @param {Renderer2} renderer
   * @type {void}
   * @memberof Utils
   */
  static addOverlayClass(className: string, renderer: Renderer2): void {
    const overlay = document.querySelectorAll(
      '.igx-overlay>.igx-overlay__wrapper>.igx-overlay__content'
    );
    if (overlay.length < 1) return;
    renderer.addClass(overlay[overlay.length - 1], className);
  }
}