"use client";

import { useEffect } from "react";
import { useAppSelector } from "@/store/hooks";
import { applyGlobalButtonAppearanceToDocument } from "@/lib/button-appearance";
import { applyGlobalInputAppearanceToDocument } from "@/lib/input-appearance";
import {
  selectButtonBorderRadius,
  selectButtonBorderRadiusCustom,
  selectButtonSizeScale,
  selectInputBorderRadius,
  selectInputBorderRadiusCustom,
  selectInputSizeScale,
  selectInputStylePreset,
  selectPreferredButtonStyle,
} from "@/store/slices/layout-builder-slice";

/** Syncs layout-builder button + input themes to the document. */
export function ButtonThemeSync() {
  const preferredButtonStyle = useAppSelector(selectPreferredButtonStyle);
  const buttonBorderRadius = useAppSelector(selectButtonBorderRadius);
  const buttonBorderRadiusCustom = useAppSelector(selectButtonBorderRadiusCustom);
  const buttonSizeScale = useAppSelector(selectButtonSizeScale);
  const inputBorderRadius = useAppSelector(selectInputBorderRadius);
  const inputBorderRadiusCustom = useAppSelector(selectInputBorderRadiusCustom);
  const inputSizeScale = useAppSelector(selectInputSizeScale);
  const inputStylePreset = useAppSelector(selectInputStylePreset);

  useEffect(() => {
    document.documentElement.dataset.buttonTheme = preferredButtonStyle;
  }, [preferredButtonStyle]);

  useEffect(() => {
    applyGlobalButtonAppearanceToDocument({
      borderRadiusPreset: buttonBorderRadius,
      borderRadiusCustom: buttonBorderRadiusCustom,
      sizeScale: buttonSizeScale,
    });
  }, [buttonBorderRadius, buttonBorderRadiusCustom, buttonSizeScale]);

  useEffect(() => {
    applyGlobalInputAppearanceToDocument({
      borderRadiusPreset: inputBorderRadius,
      borderRadiusCustom: inputBorderRadiusCustom,
      sizeScale: inputSizeScale,
      stylePreset: inputStylePreset,
    });
  }, [
    inputBorderRadius,
    inputBorderRadiusCustom,
    inputSizeScale,
    inputStylePreset,
  ]);

  return null;
}