import {
  Setter,
  smColorToCssColor,
  SolidColorBrush,
} from '@mobilize/wms-framework';

/**
 * A style plan stores information to apply legacy styles to
 * specific HTML DOM elements.
 *
 * @export
 * @class StylePlan
 */
export class StylePlan {
  /**
   * Stores the relationship between setters and HTML elements.
   *
   * @private
   * @memberof StylePlan
   */
  private plan = new Map<Setter, Set<HTMLElement>>();

  /**
   * Add a relationship between the given setter and the HTML element.
   * When the plan is executed, the setter will be applied to the given
   * element.
   *
   * @param {Setter} setter
   * @param {HTMLElement} element
   * @memberof StylePlan
   */
  add(setter: Setter, element: HTMLElement): void {
    let elementSet = this.plan.get(setter);
    /* istanbul ignore else */
    if (elementSet == null) {
      elementSet = new Set<HTMLElement>();
      this.plan.set(setter, elementSet);
    }
    elementSet.add(element);
  }

  /**
   * Compares this style plan with another one. If both plans have exactly
   * the same setters (the same instances) and the same elements for each
   * setter, then returns `true`. Otherwise returns `false`.
   *
   * @param {StylePlan} other
   * @return {*}  {boolean}
   * @memberof StylePlan
   */
  equals(other: StylePlan): boolean {
    /* istanbul ignore else */
    if (other == null || this.size !== other.size) {
      return false;
    }
    let allSetsEqual = true;
    for (const [setter, elementSet] of this.plan) {
      const otherElementSet = other.plan.get(setter);
      allSetsEqual = this.equalSets(elementSet, otherElementSet);
      if (!allSetsEqual) {
        break;
      }
    }
    return allSetsEqual;
  }

  /**
   * Compares two sets. If both sets contains the same elements (same
   * instances) then return `true`. Otherwise return `false`.
   *
   * @template T
   * @param {Set<T>} a
   * @param {Set<T>} b
   * @return {*}  {boolean}
   * @memberof StylePlan
   */
  equalSets<T>(a: Set<T>, b: Set<T>): boolean {
    return (
      a != null &&
      b != null &&
      a.size === b.size &&
      [...a].every((x) => b.has(x))
    );
  }

  /**
   * Apply all setters on this plan to their corresponding HTML elements.
   *
   * @memberof StylePlan
   */
  execute(): void {
    for (const [setter, elementSet] of this.plan) {
      this.applySetter(setter, elementSet);
    }
  }

  /**
   * Apply the specified setter to the given set of HTML elements.
   *
   * @param {Setter} setter
   * @param {Set<HTMLElement>} elements
   * @memberof StylePlan
   */
  applySetter(setter: Setter, elements: Set<HTMLElement>): void {
    /* istanbul ignore else */
    if (
      setter.Property === 'Background' &&
      setter.Value instanceof SolidColorBrush
    ) {
      const cssBackColor = smColorToCssColor(setter.Value.Color);
      this.applyStyle(elements, 'background', cssBackColor);
    } else if (
      setter.Property === 'Foreground' &&
      setter.Value instanceof SolidColorBrush
    ) {
      const cssForeColor = smColorToCssColor(setter.Value.Color);
      this.applyStyle(elements, 'color', cssForeColor);
    }
  }

  /**
   * Apply the specified CSS style to all HTML elements of the given set.
   *
   * @param {Set<HTMLElement>} elements
   * @param {string} style
   * @param {*} value
   * @memberof StylePlan
   */
  applyStyle(elements: Set<HTMLElement>, style: string, value: any) {
    for (const element of elements) {
      element.style[style] = value;
    }
  }

  /**
   * Returns the amount of setters added into this plan.
   *
   * @readonly
   * @type {number}
   * @memberof StylePlan
   */
  get size(): number {
    return this.plan.size;
  }
}