import React from 'react';

export interface TransformFieldProps {
  value?: any[] | [];
  onChange?: (value: any[]) => void;
}

const TransformField: React.FC<TransformFieldProps> = props => {
  const { value, onChange, children } = props;
  const newValue = value?.map(item => ({
    ...item,
    label: item?.name,
    value: item?.id,
  }));

  const handleChange = (value: any[]) => {
    onChange &&
      onChange(
        value?.map(item => ({ ...item, id: item?.value, name: item?.label })),
      );
  };
  return (
    /* eslint-disable-next-line */
    <>
      {React.Children.map(children, (child: any) =>
        React.cloneElement(child, {
          value: newValue,
          onChange: handleChange,
        }),
      )}
    </>
  );
};

export default TransformField;