import React, { useState } from "react";
import { QuestionApi } from "../Services/Api";
import EditExamModal from "./EditExamModal";
import { useEffect } from "react";

const Carousel = ({ data }) => {
  console.log(data)
  const [questionList, setQuestionList] = useState(data);
  const [updatedAnswer, setUpdatedAnswer] = useState();
  const [currentIndex, setCurrentIndex] = useState(0);
  const nextSlide = () => {
    setCurrentIndex((currentIndex + 1) % data.length);
  };
  const prevSlide = () => {
    setCurrentIndex((currentIndex - 1 + data.length) % data.length);
  };

  const deleteQuestion = async (id) => {
    const response = await QuestionApi(`/DeleteQuestion/${id}`, {
      method: "DELETE",
      headers: {
        "Content-Type": "application/json",
      },
    });
    if (response.ok) {
      await setQuestionList((questionList) => {
        const updatedList = questionList.filter((item) => item.id !== id);
        if (
          updatedList.length === 0 ||
          currentIndex === questionList.length - 1
        ) {
          setCurrentIndex(0);
        }
        return updatedList;
      });
    } else {
      console.log("Sınav Silme Başarısız");
    }
  };
  const updateToQuestion = async (id, name, answer, examId) => {
    const updatedData = {
      id: id,
      content: name,
      allAnswer: JSON.stringify(updatedAnswer),
      examId: examId,
    };
    const jsonData = JSON.stringify(updatedData);
    const response = await QuestionApi(`/UpdateQuestion/${id}`, {
      method: "PUT",
      headers: {
        "Content-Type": "application/json",
      },
      body: jsonData,
    });

    if (!response.ok) {
      console.log("Güncelleme işlemi başarısız.");
    }
  };

  const trueAnswer = JSON.parse(data[currentIndex].allAnswer).find(
    (answer) => answer.IsTrue
  );

  return (
    <div className=" container carousel text-white mx-5 my-5 bg-dark bg-gradient p-4 rounded">
      <h2>{data[currentIndex].content}</h2>
      <ul>
        {JSON.parse(data[currentIndex].allAnswer).map((answer, index) => (
          <li key={index}>{answer.Text}</li>
        ))}
      </ul>
      <p>Doğru Cevap: {trueAnswer.Text}</p>
      <button className="btn btn-warning mx-3" onClick={prevSlide}>
        Geri
      </button>
      <button className="btn btn-warning" onClick={nextSlide}>
        İleri
      </button>
      <div className="d-flex align-items-center gap-2 mt-2">
        <button
          className="btn btn-primary me-2 float-end"
          data-bs-toggle="modal"
          data-bs-target={`#exampleModal-${questionList[currentIndex].id}`}
          data-bs-whatever="@getbootstrap"
        >
          Güncelle
        </button>
        <button
          className="btn btn-danger"
          onClick={() => deleteQuestion(questionList[currentIndex].id)}
        >
          Sil
        </button>
      </div>
      <EditExamModal
        id={questionList[currentIndex].id}
        updateToQuestion={updateToQuestion}
        name={questionList[currentIndex].content}
        answer={JSON.parse(data[currentIndex].allAnswer)}
        setUpdatedAnswer={setUpdatedAnswer}
        examId={data[currentIndex].examId}
        trueAnswer={trueAnswer}
      />
    </div>
  );
};

export default Carousel;