import React from 'react';
import SimpleInput from '@/components/input';

type Props = {
  idPregunta: number;
  enunciado: string;
  obligatorio?: boolean;
  validacion?: string;
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  respuestas: Record<string, any>;
  cuentaInfo: {
    nombre: string;
    apellidos: string;
    correo: string;
    genero: 'M' | 'F';
    carrera: string;
  } | null;
  isComunidad: string | undefined;
  onChange: (id: string, valor: string) => void;
  preguntaComunidad: string;
};

const confirmativeOption = ['Sí', 'Si', 'Si, claro', 'Claro que sí'];

export default function PrefetchAbiertaCorta({
  idPregunta,
  enunciado,
  validacion,
  respuestas,
  cuentaInfo,
  isComunidad,
  obligatorio,
  onChange,
  preguntaComunidad,
}: Props) {
  console.log(preguntaComunidad);
  let defaultValue = '';
  let disabled = false;

  if (confirmativeOption.includes(isComunidad ?? '') && cuentaInfo) {
    if (validacion === 'nombre' && cuentaInfo.nombre) {
      defaultValue = cuentaInfo.nombre;
      disabled = true;
    }
    if (validacion === 'apellidos' && cuentaInfo.apellidos) {
      defaultValue = cuentaInfo.apellidos;
      disabled = true;
    }
    if (validacion === 'correo' && cuentaInfo.correo) {
      defaultValue = cuentaInfo.correo;
      if (preguntaComunidad !== 'comunidad_trabajador') {
        disabled = true;
      }
    }
    if (validacion === 'institucion') {
      defaultValue = 'FES Acatlán';
      disabled = true;
    }
    if (validacion === 'carrera' && cuentaInfo.carrera) {
      defaultValue = cuentaInfo.carrera;
      disabled = true;
    }
  }

  return (
    <div className="my-4">
      <label className={`form-label ${obligatorio ? 'required' : ''}`}>
        {enunciado}
      </label>
      <SimpleInput
        type="text"
        name={`respuesta_${idPregunta}`}
        placeholder="Ingrese una respuesta"
        value={respuestas[idPregunta] ?? defaultValue}
        disabled={disabled}
        onChange={(e) => onChange(idPregunta.toString(), e.target.value)}
      />
    </div>
  );
}
