/**
 * Background browser helper.
 * Renders the Figma page backgrounds as CSS background-image layers.
 */

const VALID_VARIANTS = ["gradient", "shape"];
const VALID_DEVICES = ["desktop", "tablet", "mobile"];

function className(variant, device, { fixed = false, preview = false } = {}) {
  const classes = ["vmk-bg"];
  if (VALID_VARIANTS.includes(variant)) classes.push(`vmk-bg-${variant}`);
  if (fixed) classes.push("is-fixed");
  if (preview) classes.push("is-preview");
  return classes.join(" ");
}

function html(options = {}) {
  const { variant = "gradient", device = "desktop", fixed = false, preview = false, content = "" } = options;
  return `<div
      class="${className(variant, device, { fixed, preview })}"
      data-variant="${VALID_VARIANTS.includes(variant) ? variant : "gradient"}"
      data-device="${VALID_DEVICES.includes(device) ? device : "desktop"}"
    >${content}</div>`;
}

function create(options = {}) {
  const { variant = "gradient", device = "desktop", fixed = false, preview = false } = options;
  const el = document.createElement("div");
  el.className = className(variant, device, { fixed, preview });
  el.dataset.variant = VALID_VARIANTS.includes(variant) ? variant : "gradient";
  el.dataset.device = VALID_DEVICES.includes(device) ? device : "desktop";
  return el;
}

function apply(el, options = {}) {
  if (!el) return null;
  const { variant = "gradient", device = "desktop", fixed = false, preview = false } = options;
  el.className = className(variant, device, { fixed, preview });
  el.dataset.variant = VALID_VARIANTS.includes(variant) ? variant : "gradient";
  el.dataset.device = VALID_DEVICES.includes(device) ? device : "desktop";
  return el;
}

const Background = { html, create, apply, className };

export default Background;
export { html, create, apply, className };