import type { LegacyRef, PropsWithChildren } from 'react';
import React from 'react';

import { tagMessage } from '../../../utils';
import { isRNSVGNode } from '../../../web/utils';

export const Wrap = ({
  ref,
  children,
}: PropsWithChildren<{}> & {
  ref: React.Ref<HTMLDivElement>;
}) => {
  try {
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    const child: any = React.Children.only(children);

    if (isRNSVGNode(child)) {
      const clone = React.cloneElement(
        child,
        { ref },
        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
        child.props.children
      );

      return clone;
    }

    return (
      <div
        ref={ref as LegacyRef<HTMLDivElement>}
        style={{ display: 'contents' }}>
        {child}
      </div>
    );
  } catch (e) {
    throw new Error(
      tagMessage(
        `GestureDetector got more than one view as a child. If you want the gesture to work on multiple views, wrap them with a common parent and attach the gesture to that view.`
      )
    );
  }
};

// On web we never take a path with Reanimated,
// therefore we can simply export Wrap
export const AnimatedWrap = Wrap;