import React from 'react'
import { useEffect } from 'react';
import { Control, FieldValues, useFieldArray, useForm, UseFormRegister, UseFormSetValue } from 'react-hook-form';
import { useFetchWithAuth } from '../../hooks/useFetchWithAuth';
import { Manytooneform } from './Manytooneform';
import TableHeadForm from './TableHeadForm';

interface Props {
  entityName: string,
  entityId: number,
  element:string,
  oneToManyHeader: {id:string, name:string}[],
  control: Control<any, any>,
  register: UseFormRegister<any>,
  setValue: UseFormSetValue<any>


}

export const Onetomany = ({entityName, entityId, element, oneToManyHeader, control, register, setValue }:Props) => {

  const { fields, append, remove } = useFieldArray({
      control,
      name: element
  });

  
  const getInitData = async () => {

    const { data, error } = await useFetchWithAuth(entityName + "/" + entityId);
    if (!error) {

      setValue(element,data[element]);
    } else {
        console.log(error)
    }
}

  useEffect(() => {
    getInitData();
}, [entityId])


  const renderElement = (key:string, attribute: string) => {

    switch (attribute){
      case 'String':
        return <input key={key} type='text' className='input input-bordered input-primary input-xs'  {...register(key)}/>;
      case  "ManyToOne":
          return <Manytooneform key={key} attribute={ "producto"}  keyRegiter={key.concat(".id")} control={control} />        
      case 'Long':
        return <input key={key} type='number' className='input input-bordered input-primary input-xs'  {...register(key)}/>;
      case 'Boolean':
        return <input key={key} type='checkbox' className='toggle toggle-primary toggle-xs' {...register(key)}/>;
      case 'BigDecimal':
          return <input key={key} type='number' className='input input-bordered input-primary input-xs' {...register(key)}/>; 
      case 'LocalDateTime':
        return <input key={key} type='date' className='input input-bordered input-primary input-xs' {...register(key)}/>;                    
      default:
        console.log(key)
        return <span key={key}>{key}</span>;      
    }
  }

  const columnNames = oneToManyHeader.map(column => (column.id))
  let defaultvalue = "";
  if (columnNames.length>0){
    defaultvalue = columnNames.reduce((acc, curr) => {
      acc = "";
      return acc;
    }, );  
  }else{
    
  }
  
  
  return (
    <div key={entityName+"div"} className="overflow-x-auto">
      
      <table className="table w-full table-compact">
        <TableHeadForm columns={oneToManyHeader}/>
        <tbody>
        {
          
        fields.map((line, index) => {
          return (

            <tr key={line['id']}>
                {
                  oneToManyHeader.map(column => (
                    <td key={line['id']+column.id}>
                      
                      {renderElement(`${element}.${index}.${column.id}`,column.name)}
                    </td>
                  ))
                }
            </tr>

          )
        })
        }
        </tbody>
      </table>
      <button className='btn btn-primary'
                  type="button"
                  onClick={() => append(defaultvalue)}
                >
                  append
      </button>
    </div>
  )
}