import React from "react";

interface OperationFormProps {
  id: number;
  description: string;
  explanation: string;
  checkbox: string;
  onRemove: (id: number) => void;
  deleteBtn: boolean;
  disabled: boolean;
  readOnlyDes: boolean;
  readOnlyAva: boolean;
  requiredCheck: boolean;
  requiredText: boolean;
}

const OperationForm: React.FC<OperationFormProps> = ({
  id,
  description,
  explanation,
  checkbox,
  onRemove,
  deleteBtn,
  disabled,
  readOnlyDes,
  readOnlyAva,
  requiredCheck,
  requiredText,
}) => {
  const inputClassDes = readOnlyDes
    ? "textarea textarea-bordered w-full mb-2 bg-gray-200 cursor-not-allowed"
    : "textarea textarea-bordered w-full mb-2";
  const inputClassAva = readOnlyAva
    ? "textarea textarea-bordered w-full mb-2 bg-gray-200 cursor-not-allowed"
    : "textarea textarea-bordered w-full mb-2";

  const [selectedValue, setSelectedValue] = React.useState<string>(checkbox);

  const renderRadioTrueButtons = (value: string, id: number) => (
    <input
      type="radio"
      id={`${value}_${id}`}
      name={`D${id + 15}`}
      value={value}
      className="checkbox mr-2"
      disabled={disabled}
      required={requiredCheck}
      onChange={() => setSelectedValue(value)}
    />
  );

  const renderRadioFalseButtons = (value: string, id: number) => (
    <input
      type="radio"
      id={`${value}_${id}`}
      name={`D${id + 15}`}
      value={value}
      checked={selectedValue === value}
      className="checkbox mr-2"
      disabled={disabled}
      required={requiredCheck}
      onChange={() => setSelectedValue(value)}
    />
  );

  return (
    <div className="mb-6">
      <div className="flex justify-between items-center mb-2">
        <h3 className="text-xl text-gray-700">İşlem {id}:</h3>
        {deleteBtn && (
          <button
            type="button"
            className="btn btn-error"
            onClick={() => onRemove(id)}
          >
            Kaldır
          </button>
        )}
      </div>
      <textarea
        className={inputClassAva}
        placeholder="Uygulanan işlemi yazın"
        name={`B${id + 15}`}
        readOnly={readOnlyAva}
        required={requiredText}
        defaultValue={description}
      ></textarea>
      <div className="flex items-center space-x-4 mb-4">
        <div className="flex items-center">
          {requiredCheck
            ? renderRadioTrueButtons("✓", id) // Render without interactive behavior
            : renderRadioFalseButtons(
                "✓",
                id
              ) // Render with interactive behavior
          }
          <label htmlFor={`uygun_${id}`} className="text-gray-700">
            Uygun
          </label>
        </div>
        <div className="flex items-center">
          {requiredCheck
            ? renderRadioTrueButtons("X", id) // Render without interactive behavior
            : renderRadioFalseButtons(
                "X",
                id
              ) // Render with interactive behavior
          }
          <label htmlFor={`uygun_degil_${id}`} className="text-gray-700">
            Uygun Değil
          </label>
        </div>
      </div>
      <textarea
        className={inputClassDes}
        placeholder="Açıklama girin"
        name={`H${id + 15}`}
        readOnly={readOnlyDes}
        defaultValue={explanation}
      ></textarea>
    </div>
  );
};

export default OperationForm;