import { setElementVars } from '@vanilla-extract/dynamic';
import { useRef } from 'react';

import { useResizeObserver } from '../utils/hooks';
import * as css from './input-label.css';

export function useInputLabel<
  TargetElement extends HTMLElement = HTMLInputElement,
  StartAddonElement extends HTMLElement = HTMLDivElement,
  LabelElement extends HTMLElement = HTMLLabelElement,
>() {
  const labelRef = useRef<LabelElement>(null);
  const startAddonRef = useRef<StartAddonElement>(null);
  const targetRef = useRef<TargetElement>(null);

  useResizeObserver(targetRef, targetEntry => {
    if (!labelRef.current) {
      return;
    }

    setElementVars(labelRef.current, {
      [css.labelVars.additionalTranslateY]: `${
        targetEntry.contentRect.height / 2
      }px`,
    });

    labelRef.current.style.width = `${
      targetEntry.contentRect.width / css.labelScaleFactor
    }px`;
  });

  useResizeObserver(
    startAddonRef,
    leftAddonEntry => {
      if (!labelRef.current) {
        return;
      }

      const leftAddonElement = leftAddonEntry.target as HTMLDivElement;

      setElementVars(labelRef.current, {
        [css.labelVars
          .additionalTranslateX]: `${leftAddonElement.offsetWidth}px`,
      });
    },
    { box: 'border-box' },
  );

  return {
    labelRef,
    targetRef,
    startAddonRef,
  };
}