import React, { FC } from "react";
import FormData from "../../types/FormData";
import CheckBox from "../checkbox";

/* Definimos los tipos de datos que seran pasados a este componente */
export interface TableFormItemProps
  extends React.HTMLAttributes<HTMLTableRowElement> {
  buttons?: Array<JSX.Element>; // Botones que sean necesarios en la fila
  options?: Array<string> | string; // Opciones en forma de Check boxes para formularios
  inputs?: Array<JSX.Element>; // Inputs de Texto u otros componentes de entrada
  sectionData?: FormData; // En caso de formulario con secciones, se recibiran las preguntas poniendo una en cada fila y las opciones en las columnas
  formData?: FormData[]; // Array de objetos original donde se guarda toda la informacion de un formulario
  formDataIndex?: number;
  pinned?: boolean;
  disable?: boolean; // Numero del indice del array de objetos que esta siendo rederizado en este componente
  handleOnChange?: React.Dispatch<React.SetStateAction<FormData[]>>; //Funcion proveniente del useState para actualizar el array de objetos
}

const TableFormItem: FC<TableFormItemProps> = (props) => {
  /* Deestructurar props para recibir las variables que necesitamos */
  let {
    buttons,
    options,
    inputs,
    disable,
    handleOnChange,
    sectionData,
    formData,
    formDataIndex,
  } = props;

  /*  Funcion que sobreescribe el array de objetos inicial */
  function handleChange(e: { target: HTMLInputElement }): void {
    const { name, value } = e.target;

    let newArr = formData ? formData : [];
    if (formDataIndex)
      newArr[formDataIndex] = { ...newArr[formDataIndex], [name]: value };

    if (handleOnChange) handleOnChange(newArr);
    if (formDataIndex) sectionData = newArr[formDataIndex];
  }

  return (
    <>
      {/* En caso de que exista section data se hara un formulario */}
      {sectionData &&
        Object.keys(sectionData)?.map((label, masterIndex) => {
          if (label !== "options") {
            return (
              <tr key={masterIndex * 0.1}>
                <td>
                  <span>{label}</span>
                </td>

                {inputs?.map((field, index) => (
                  <td key={index * 1000}>{field}</td>
                ))}
                {typeof options === "string" ? (
                  <td>
                    <CheckBox
                      index={
                        Object.keys(JSON.parse(JSON.stringify(sectionData)))[
                          masterIndex
                        ]
                      }
                      checked
                    />
                  </td>
                ) : (
                  options?.map((option, index) => (
                    <td key={index * 100}>
                      <input
                        className="small"
                        disabled={disable}
                        type="radio"
                        name={
                          Object.keys(JSON.parse(JSON.stringify(sectionData)))[
                            masterIndex
                          ]
                        }
                        value={option}
                        onChange={handleChange}
                      />
                    </td>
                  ))
                )}
                {buttons && (
                  <td
                    style={{
                      display: "flex",
                      justifyContent: "center",
                      alignItems: "center",
                    }}
                  >
                    {buttons}
                  </td>
                )}
              </tr>
            );
          }
          return <></>;
        })}

      {/* En caso contrario solo se renderizaran los componentes que han sido pasados en inputs y buttons*/}

      {!sectionData && (
        <tr>
          {inputs?.map((field, index) => (
            <td key={index * 0.0001}>{field}</td>
          ))}
          {buttons && <td>{buttons}</td>}
        </tr>
      )}
    </>
  );
};

export default TableFormItem;
