import { useTheme } from '@mui/material';

import {
  type ChangeEvent,
  type RefObject,
  useEffect,
  useRef,
  useState
} from 'react';

interface UseAutoSizeProps {
  autoSize: boolean;
  autoSizeCustomPadding?: number;
  autoSizeDefaultWidth: number;
  value?: string;
}

interface UseAutoSizeState {
  changeInputValue: (
    event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
  ) => void;
  innerValue: string;
  inputRef: RefObject<HTMLDivElement>;
  width: string;
}

const defaultPaddingTotal = 4.5;

const useAutoSize = ({
  autoSize,
  autoSizeDefaultWidth,
  value,
  autoSizeCustomPadding
}: UseAutoSizeProps): UseAutoSizeState => {
  const [innerValue, setInnerValue] = useState(value || '');
  const [width, setWidth] = useState(autoSizeDefaultWidth);
  const inputRef = useRef<HTMLDivElement>(null);
  const theme = useTheme();

  const changeInputValue = (
    event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
  ): void => {
    setInnerValue(event.target.value);
  };

  useEffect(() => {
    if (!autoSize) {
      return;
    }

    const newWidth = inputRef.current?.getBoundingClientRect().width || 0;

    setWidth(newWidth < autoSizeDefaultWidth ? autoSizeDefaultWidth : newWidth);
  }, [autoSize, autoSizeDefaultWidth]);

  return {
    changeInputValue,
    innerValue,
    inputRef: inputRef as RefObject<HTMLDivElement>,
    width: `calc(${width}px + ${theme.spacing(
      autoSizeCustomPadding || defaultPaddingTotal
    )})`
  };
};

export default useAutoSize;