import React, { forwardRef } from "react";
import { useQuizViewStore } from "@stores/quizView";

interface OwnVarimgImageProps {
  questionId: string;
  variantId: string;
}

export const OwnVarimgImage = forwardRef<HTMLInputElement, OwnVarimgImageProps>(({ questionId, variantId }, ref) => {
  const { updateAnswer, updateOwnVariantWithFile } = useQuizViewStore((state) => state);

  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    const file = event.target.files?.[0];
    if (file) {
      // @ts-ignore
      updateOwnVariantWithFile(variantId, file);
      updateAnswer(questionId, variantId, 0);
      event.target.value = "";
    }
  };

  return (
    <input
      type="file"
      ref={ref}
      style={{ display: "none" }}
      accept="image/*"
      onChange={handleFileChange}
    />
  );
});

OwnVarimgImage.displayName = "OwnVarimgImage";