import { setDeletionModalId, setDeletionModalVisible } from '../redux/reducer';
import { ErrorText } from './error-text';
import { CardLabel } from './card-label';
import { DeleteIcon } from './delete-icon';

export const CardSelectionSection = ({
  title,
  cards,
  selectedCard,
  onSelect,
  register,
  errors,
  dispatch
}) => (
  <div className="border-solid border-gray-400 px-4 py-2">
    <span className="text-black-800 text-lg font-medium">{title}</span>
    <ul className="mt-4 text-xs w-full">
      {cards?.map((card, index) => (
        <li
          key={card.token}
          className="p-4 mb-2 border-2 border-gray-200 flex justify-between items-center cursor-pointer"
          onClick={(e) => {
            e.preventDefault();
            onSelect(card);
          }}
          data-testid={`saved-card-item-${index}`}
        >
          <input
            name="card"
            type="radio"
            checked={selectedCard?.token === card.token}
            value={card.token}
            id={card.token}
            className="mr-2"
            onChange={() => {}}
            {...register('card')}
          />
          <CardLabel card={card} />
          {card.id && (
            <DeleteIcon
              onClick={(e) => {
                e.stopPropagation();
                dispatch(setDeletionModalId(card.id));
                dispatch(setDeletionModalVisible(true));
              }}
            />
          )}
        </li>
      ))}
    </ul>
    {errors.card && <ErrorText message={errors.card?.message} />}
  </div>
);