import React from "react";
import { disapledDependsOn } from "./handles";



export type children =  {
  defaultValue?:any
  dependensValue: number | string | undefined | Array<any> | any;
  props:{[key:string]:any}
};
export type parent = {
  defaultValue?:any,
    props:{[key:string]:any}
};

type DependensesFieldesProps = {
  parent?: parent;
  childrens?: children[];
  Component: React.ComponentType<any>; 
};

function DependensesFieldes({
  parent,
  childrens,
  Component,
}: DependensesFieldesProps) {
  return (
    <>
      {parent && React.createElement(Component, {
        ...{...parent.props},
        ...(parent.defaultValue && { defaultValue: parent.defaultValue }),
      })}

      {childrens?.map((child: children, index: number) =>
        React.createElement(Component, {
          key: index,
          ...{...child.props},
          ...(child.defaultValue
            ? {
              defaultValue: child.defaultValue,
                clear: disapledDependsOn(child.dependensValue)
                  ? { value: disapledDependsOn(child.dependensValue) }
                  : undefined,
              }
            : { clear: { value: disapledDependsOn(child.dependensValue) } }),
            disabled:disapledDependsOn(child.dependensValue),

        })
      )}
    </>
  );
}

export default DependensesFieldes;
