import React, {useRef, useState, useEffect, type FC} from 'react';

import type {StringToReactComponentProps, IStringToReactApi, TBabel, TReact} from './types.d';

function StringToReactComponent(

deps: {

getCtx: (react: TReact, Babel: TBabel, rerender: (state: {}) => void) => IStringToReactApi;

react: TReact;

Babel: TBabel;

},

props: StringToReactComponentProps,

) {

const {getCtx, Babel, react} = deps;

const [, rerender] = useState<object>({});

let ref = useRef<IStringToReactApi | null>(null);

ref.current = ref.current || getCtx(react, Babel, rerender);

const api = ref.current as IStringToReactApi;

const data = props.data || {};

useEffect(() => {

api.update(props.children || '()=>null', props.babelOptions || {});

}, [props.children, props.babelOptions]);

const Com: FC = api.getComponent();

return <Com {...data} />;

}

export default StringToReactComponent;