import { useState, useMemo, useEffect } from "react";
import { loadFromStorage, saveToStorage } from "../utils/localStorageUtils";
import { rowBaseOffset } from "../constants/tableConfig";

export const useTableScale = () => {
  const [sizeMult, setSizeMult] = useState(() =>
    loadFromStorage("sizeMult", 1),
  );

  useEffect(() => {
    saveToStorage("sizeMult", sizeMult);
  }, [sizeMult]);

  const tableScaleStyle = useMemo(
    () => ({
      transform: `scale(${sizeMult})`,
      transformOrigin: "top left",
      transition: "transform 0.2s ease-in-out",
      willChange: "transform",
      display: "flex",
      flexDirection: "column",
      flex: 1,
      width: `${100 / sizeMult}%`,
      height: `${100 / sizeMult}%`,
      maxHeight: `${100 / sizeMult}%`,
      minHeight: `${100 / sizeMult}%`,
    }),
    [sizeMult],
  );

  const tableWrapperStyle = useMemo(() => {
    return {
      overflow: "visible",
      overflowX: sizeMult > 1.2 ? "auto" : "visible",
      overflowY: sizeMult > 1.2 ? "auto" : "visible",
      display: "flex",
      flexDirection: "column",
      height: "92%",
      maxHeight: "92%",
      minHeight: "92%",
      padding: "1rem",
    };
  }, [sizeMult]);

  return { sizeMult, setSizeMult, tableScaleStyle, tableWrapperStyle };
};