import { CSSResult, css, unsafeCSS } from 'lit';

export class VariableHelper {
  private property: string | undefined;
  private variableName: string | undefined;
  private groupModifier: string | undefined;

  private defaultValue: string | CSSResult = '/*! */';
  private isPrivate = false;

  public asPrivate(isPrivate = true) {
    this.isPrivate = isPrivate;
    return this;
  }

  public withDefaultValue(value: string | CSSResult) {
    this.defaultValue = value;
    return this;
  }

  public withProperty(property: string) {
    this.property = property;
    return this;
  }

  public withVariableName(name: string) {
    this.variableName = name;
    return this;
  }

  public withGroupModifier(modifier: string, ...modifiers: string[]) {
    this.groupModifier = [modifier, ...modifiers].join('--');

    return this;
  }

  public toCss() {
    if (!this.property) {
      return css`
        ${unsafeCSS(this.buildVariableName())}
      `;
    }

    return css`
      ${unsafeCSS(this.property)}: ${unsafeCSS(this.buildVariableName())};
    `;
  }

  private buildVariableName() {
    const variableName = [];

    if (this.groupModifier) {
      variableName.push(this.groupModifier);
    }

    if (this.variableName) {
      variableName.push(this.variableName);
    }

    return `var(--${this.isPrivate ? '_' : ''}${variableName.join('--')}, ${
      this.defaultValue
    })`;
  }

  // static builders for convencience
  public static from(): VariableHelper {
    return new VariableHelper();
  }

  public static fromDefaultValue(value: string | CSSResult) {
    return VariableHelper.from().withDefaultValue(value);
  }

  public static fromProperty(property: string) {
    return VariableHelper.from().withProperty(property);
  }

  public static fromVariableName(name: string) {
    return VariableHelper.from().withVariableName(name);
  }
}