import {ReactNode, useEffect, useRef} from 'react';
import {useFormContext} from 'react-hook-form';
import clsx from 'clsx';

interface Props {
  children: (isInvalid: boolean) => ReactNode;
  name: string;
  separatorBottom?: boolean;
  separatorTop?: boolean;
}
export function SettingsErrorGroup({
  children,
  name,
  separatorBottom = true,
  separatorTop = true,
}: Props) {
  const {
    formState: {errors},
  } = useFormContext<Record<string, string>>();

  const ref = useRef<HTMLDivElement>(null);
  const error = errors[name];

  useEffect(() => {
    if (error) {
      ref.current?.scrollIntoView({behavior: 'smooth'});
    }
  }, [error]);

  return (
    <div
      className={clsx(
        separatorBottom && 'border-b mb-20 pb-20',
        separatorTop && 'border-t mt-20 pt-20',
        error && 'border-y-error'
      )}
      ref={ref}
    >
      {children(!!error)}
      {error && (
        <div
          className="text-danger text-sm mt-20"
          dangerouslySetInnerHTML={{__html: error.message!}}
        />
      )}
    </div>
  );
}