graycoreio/daffodil

import {
  ElementRef,
  Input,
  Renderer2,
} from '@angular/core';

import { DaffTextAlignment } from './text-alignable';
import { Constructor } from '../constructor/constructor';

interface HasElementRef {
  _elementRef: ElementRef;
  _renderer: Renderer2;
}

export function
daffTextAlignmentMixin<T extends Constructor<HasElementRef>>(Base: T, defaultTextAlignment?: DaffTextAlignment) {
  class DaffTextAlignableMixin extends Base {
    // TODO move this back to private in Typescript 3.1
    _textAlignment: DaffTextAlignment;

    /**
     * Controls text alignment for component-specific UI
     */
    get textAlignment(): DaffTextAlignment {
      return this._textAlignment;
    }
    set textAlignment(value: DaffTextAlignment) {
      // Handles the default text alignment
      const incomingTextAlignment = value || defaultTextAlignment;

      if (incomingTextAlignment === this._textAlignment) { // Only run the dom-render if a change occurs
        return;
      }

      // Removes the old text alignment
      if (this._textAlignment) {
        this._renderer.removeClass(this._elementRef.nativeElement, `daff-${this._textAlignment}`);
      }

      if (incomingTextAlignment) {
        this._renderer.addClass(this._elementRef.nativeElement, `daff-${incomingTextAlignment}`);
      }

      this._textAlignment = incomingTextAlignment;
    }

    constructor(...args: any[]) {
      super(...args);
      this.textAlignment = defaultTextAlignment;
    }
  };

  // TODO: ugly workaround for https://github.com/microsoft/TypeScript/issues/7342#issuecomment-624298133
  Input()(DaffTextAlignableMixin.prototype, 'textAlignment');

  return DaffTextAlignableMixin;
}