import React, { useEffect, useState } from 'react';
import { XRNKeyboard } from '@xrnjs/keyboard';

export const Keyboard = {
  Content: (props: {
    children: React.ReactElement<{ nativeID?: string }> | null;
  }) => {
    const [nativeID, setNativeID] = useState<string | undefined>(undefined);
    useEffect(() => {
      (async () => {
        const id = await XRNKeyboard.getKeyboardContentNativeID();
        setNativeID(id);
      })();
    }, []);

    if (!props.children) return null;
    if (Array.isArray(props.children)) {
      throw new Error('Keyboard.Content can have only one child view');
    }

    return React.isValidElement(props.children)
      ? React.cloneElement(
          props.children as unknown as React.ReactElement<{
            nativeID?: string;
          }>,
          { nativeID: nativeID || 'keyboard_content_native_id' }
        )
      : props.children;
  },
};