CopilotStep.tsx

import React, { useEffect, useMemo, useRef } from "react";
import { type NativeMethods } from "react-native";

import { useCopilot } from "../contexts/CopilotProvider";

interface Props {
  name: string;
  order: number;
  text: string;
  children: React.ReactElement<any>;
  active?: boolean;
  edge?: {
    top?: number;
    left?: number;
    right?: number;
    bottom?: number;
  };
}

export const CopilotStep = ({
  name,
  order,
  text,
  children,
  active = true,
  edge = {
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
  },
}: Props) => {
  const registeredName = useRef<string | null>(null);
  const { registerStep, unregisterStep } = useCopilot();
  const wrapperRef = React.useRef<NativeMethods | null>(null);

  const measure = async () => {
    return await new Promise<{
      x: number;
      y: number;
      width: number;
      height: number;
    }>((resolve) => {
      const measure = () => {
        // Wait until the wrapper element appears
        if (wrapperRef.current != null && "measure" in wrapperRef.current) {
          wrapperRef.current.measure((_ox, _oy, width, height, x, y) => {
            const safeEdge = {
              top: edge?.top ?? 0,
              left: edge?.left ?? 0,
              right: edge?.right ?? 0,
              bottom: edge?.bottom ?? 0,
            };
            resolve({
              x: x - safeEdge.left,
              y: y - safeEdge.top,
              width: width + safeEdge.left + safeEdge.right,
              height: height + safeEdge.top + safeEdge.bottom,
            });
          });
        } else {
          requestAnimationFrame(measure);
        }
      };

      measure();
    });
  };

  useEffect(() => {
    if (active) {
      if (registeredName.current && registeredName.current !== name) {
        unregisterStep(registeredName.current);
      }
      registerStep({
        name,
        text,
        order,
        measure,
        wrapperRef,
        visible: true,
      });
      registeredName.current = name;
    }
  }, [name, order, text, registerStep, unregisterStep, active]);

  useEffect(() => {
    if (active) {
      return () => {
        if (registeredName.current) {
          unregisterStep(registeredName.current);
        }
      };
    }
  }, [name, unregisterStep, active]);

  const copilotProps = useMemo(
    () => ({
      ref: wrapperRef,
      onLayout: () => {}, // Android hack
    }),
    [],
  );

  return React.cloneElement(children, { copilot: copilotProps });
};