export class ClassBuilder {
  private twClasses: string[];

  constructor() {
    this.twClasses = [];
  }

  public clear() {
    this.twClasses = [];
  }

  public add(condition: boolean | string | undefined, twClasses: string) {
    if (condition) {
      this.twClasses.push(...(twClasses.split(' ')));
    }
  }

  public remove(condition: boolean | string | undefined, twClass: string) {
    if (condition) {
      let classList = twClass.split(' ');
      classList.forEach(classToRemove => {
        this.twClasses = this.twClasses.filter(c => c !== classToRemove);
      })
    }
  }

  public replace(condition: boolean | string | undefined, twClassIn: string, twClassOut: string) {
    if (condition) {
      this.twClasses[this.twClasses.indexOf(twClassOut)] = twClassIn;
    }
  }

  public generate() {
    return this.twClasses.join(' ');
  }
}


export class Utils {
  private noDepth: string[];
  private color: string;
  private defaultDepth: number;

  constructor(color: string, defaultDepth: number = 500) {
    this.color = color;
    this.defaultDepth = defaultDepth;
    this.noDepth = ["white", "black", "transparent"];
  }

  private _getClass(prop: string, color: string, defaultDepth: number, depth?: number) {
    if (this.noDepth.includes(color)) {
      return `${prop}-${color}`;
    }
    return `${prop}-${color}-${depth || defaultDepth}`;
  }

  public bg(depth?: number) {
    return this._getClass("bg", this.color, this.defaultDepth, depth);
  }

  public border(depth?: number) {
    return this._getClass("border", this.color, this.defaultDepth, depth);
  }

  public txt(depth?: number) {
    return this._getClass("text", this.color, this.defaultDepth, depth);
  }

  public caret(depth?: number) {
    return this._getClass("caret", this.color, this.defaultDepth, depth);
  }
}