import _ from "lodash-es";

export class ViewportHelper {
  constructor({
    designWidth = 1920,
    designHeight = 1080,
    baseFont = 16,
    minFont = 10,
    maxFont = 50,
    useRem = false,
    useScaleFit = false,
    containerSelector = "#app",
    delay = 100,
  } = {}) {
    this.designWidth = designWidth;
    this.designHeight = designHeight;
    this.baseFont = baseFont;
    this.minFont = minFont;
    this.maxFont = maxFont;
    this.useRem = useRem;
    this.useScaleFit = useScaleFit;
    this.containerSelector = containerSelector;
    this.delay = delay;
    if (useRem && useScaleFit) {
      this.useScaleFit = false;
      console.warn(
        `The useRem and useScaleFit options are mutually exclusive. useScaleFit will be disabled.`
      );
    }

    this.onResize = _.debounce(() => {
      if (this.useRem) this.setRem();
      if (this.useScaleFit) this.scaleFit();
    }, delay);
    window.addEventListener("resize", this.onResize);

    if (this.useRem) {
      this.setRem();
    }
    if (this.useScaleFit) {
      this.scaleFit();
    }
  }

  setRem() {
    const w = window.innerWidth;
    const h = window.innerHeight;
    // 同时考虑宽度和高度，取最小值作为比例基准
    const ratio = Math.min(w / this.designWidth, h / this.designHeight);
    const fontSize = Math.max(
      this.minFont,
      Math.min(this.maxFont, this.baseFont * ratio)
    );
    document.documentElement.style.fontSize = fontSize + "px";
  }

  destroy() {
    window.removeEventListener("resize", this.onResize);
  }

  scaleFit() {
    const container = document.querySelector(this.containerSelector);
    if (!container) return;
    const w = window.innerWidth;
    const h = window.innerHeight;
    const scale = Math.min(w / this.designWidth, h / this.designHeight);
    container.style.width = `${this.designWidth}px`;
    container.style.height = `${this.designHeight}px`;
    container.style.transformOrigin = "center center";
    container.style.position = "absolute";
    container.style.left = "50%";
    container.style.top = "50%";
    container.style.transform = `translate(-50%, -50%) scale(${scale})`;
    container.style.border = `1px solid red`;
  }
}