import React, { forwardRef } from 'react'
import { Virtuoso } from "react-virtuoso";
import DynamicFieldGroup from "@/Components/DynamicFieldGroup";

const VirtuosoDynamicFieldGroup = forwardRef(({
    style = { height: '340px', width: '100%' },
    fields,
    readOnlyFields = [],
    deleteColumn = true,
    mode,
    errors,
    watch,
    control,
    setValue,
    remove,
    onDelete = null,
}, ref) => {

       // set Error Message Multiple field
    const getFormErrorMessageMultiple = (name, index = null) => {
        return errors["list"] &&
            errors["list"][index] &&
            errors["list"][index][name] ? (
            <small className="p-error ">
                {errors["list"][index][name]["message"]}
            </small>
        ) : (
            ""
        );
    };
  return (
   <Virtuoso
                      ref={ref}
                      style={style}
                      totalCount={fields.length}
                      itemContent={(index) => {
                          const item = fields[index];
                          return (
                              <div className="grid grid-cols-12 gap-6 pt-10">
                                  <DynamicFieldGroup
                                      key={item.id}
                                      control={control}
                                      watch={watch}
                                      setValue={setValue}
                                      remove={remove}
                                      index={index}
                                      onDelete={onDelete}
                                      getFormErrorMessageMultiple={
                                          getFormErrorMessageMultiple
                                      }
                                      deleteColumn={deleteColumn}
                                      mode={mode}
                                      readOnlyFields={readOnlyFields}
                                  />
                              </div>
                          );
                      }}
                  />
  )
})

VirtuosoDynamicFieldGroup.displayName = 'VirtuosoDynamicFieldGroup';

export default VirtuosoDynamicFieldGroup;
