import { LightningElement, api } from "lwc";
import brandCssVars from "./brandCssVars";
import { Brand } from "typings/custom";

export const toCss = (brand: Brand | null) => `
  :host {
    ${brandCssVars.reduce(
        (acc, v) => `
          ${acc}
          ${v}: var(${v.replace("current", brand || "default")});
        `,
        ""
    )}
  }
`;

export default class BrandThemeProvider extends LightningElement {
    @api brand: Brand | null = null;

    private get css() {
        return toCss(this.brand);
    }

    connectedCallback() {
        this.setBrandVars();
    }

    renderedCallback() {
        this.setBrandVars();
    }

    setBrandVars() {
        let style = this.template.querySelector("style");
        if (!style) {
            style = document.createElement("style");
            (this.template as any).appendChild(style);
        }

        if (style.firstChild) {
            style.removeChild(style.firstChild);
        }

        const css = document.createTextNode(this.css);
        style.appendChild(css);
    }
}