import React, { useEffect, useState } from 'react'
import { FaExclamationTriangle } from 'react-icons/fa'
import PropTypes from 'prop-types'
import { withTranslation } from 'react-i18next'
import { decryptAnswer, getImageSource, handleBookmarkClick, imgError, reportQuestion } from '@/utils'
import { useSelector } from 'react-redux'
import Bookmark from '@/components/Common/Bookmark'
import { t } from '@/utils'
function AudioReviewAnswer({ questions, goBack, reportquestions }) {

  const [currentQuestion, setCurrentQuestion] = useState(0)
  const [disablePrev, setDisablePrev] = useState(true)
  const [disableNext, setDisableNext] = useState(currentQuestion + 1 === questions?.length ? true : false)

  // store data get
  const userData = useSelector(state => state.User)

  const previousQuestion = () => {
    const prevQuestion = currentQuestion - 1
    if (prevQuestion >= 0) {
      if (prevQuestion > 0) {
        setDisablePrev(false)
      } else {
        setDisablePrev(true)
      }
      setDisableNext(false)
      setCurrentQuestion(prevQuestion)
    }
  }

  const nextQuestion = () => {
    const nextQuestion = currentQuestion + 1
    if (nextQuestion < questions?.length) {
      if (nextQuestion + 1 === questions?.length) {
        setDisableNext(true)
      } else {
        setDisableNext(false)
      }
      setDisablePrev(false)
      setCurrentQuestion(nextQuestion)
    }
  }

  const setAnswerStatusClass = option => {
    let decryptedAnswer = decryptAnswer(questions[currentQuestion].answer, userData?.data?.firebase_id)
    if (decryptedAnswer === option) {
      return 'bg-success'
    } else if (questions[currentQuestion].selected_answer === option) {
      return 'bg-danger'
    }
  }

  useEffect(() => {
    if(questions?.length <= 1){
      setDisableNext(true)
      setDisablePrev(true)
    }
  },[questions])
  return (
    <React.Fragment>
      <div className="morphisam flex-center !justify-between max-991:flex-wrap gap-1  max-991:gap-5 max-479:!justify-center darkSecondaryColor">
        <div className="text-start mt-2">
          <h4 className="font-extrabold text-[32px] max-991:text-[22px]">
            {t("review_answers")}
          </h4>
        </div>
        <div className="flex-center gap-7">
          <h5 className="p-[13px_24px] rounded-[50px] border-[2px] border-border mb-0 bordercolor dark:bg-[#3c3555]">
            {currentQuestion + 1} | {questions?.length}
          </h5>

          <div className="bg-[var(--background-2)] dark:bg-[#3c3555] text-center rounded-full h-[56px] w-[56px] flex-center text-base">
            <Bookmark
              id={questions[currentQuestion]?.id}
              onClick={handleBookmarkClick}
              type={"4"}
            />
          </div>
          {reportquestions ? (
            <div className="bg-[#09002921] text-center rounded-full h-[56px] w-[56px] flex-center text-base">
              <button
                title="Report Question"
                className="btn bookmark_btn  " 
                onClick={() => reportQuestion(questions[currentQuestion]?.id)}
              >
                <FaExclamationTriangle className="h-[24px] w-[24px]" />
              </button>
            </div>
          ) : (
            false
          )}
        </div>
      </div>
      <div className="morphisam mb-6 lg:flex darkSecondaryColor">
        <div className="w-full lg:w-2/3 flex-center h-auto bg-white rounded-[10px] mb-[10px] flex-col py-4 text-center dark:bg-[#3c3555]">
          <p className="px-4 mb-2">{questions[currentQuestion]?.question}</p>

          {questions[currentQuestion]?.image ? (
            <div className="w-full lg:w-2/3  m-auto flex-center pt-8">
              <img
                className="max-h-full max-w-full object-contain mb-[10px] rounded-[5px] h-[300px]"
                src={getImageSource(questions[currentQuestion]?.image)}
                onError={imgError}
                alt="Error Image"
              />
            </div>
          ) : (
            ""
          )}

          {/* Audio Questions Player */}
          <div className="audio_player flex justify-center w-full text-center py-3">
            <audio
              src={questions[currentQuestion]?.audio}
              controls
              autoPlay
              controlsList="nodownload noplaybackrate"
            />
          </div>
        </div>

        <div className="w-full lg:w-1/3 ">
          <div className="mr-5 ml-5 lg:mr-0  grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-1 gap-3  ">
            {questions[currentQuestion]?.optiona ? (
              <div className="optionButton">
                <button className={`optionBtn ${setAnswerStatusClass("a")}`}>
                  {questions[currentQuestion]?.optiona}
                </button>
              </div>
            ) : (
              ""
            )}
            {questions[currentQuestion]?.optionb ? (
              <div className="optionButton">
                <button className={`optionBtn ${setAnswerStatusClass("b")}`}>
                  {questions[currentQuestion]?.optionb}
                </button>
              </div>
            ) : (
              ""
            )}
            {questions[currentQuestion]?.question_type === "1" ? (
              <>
                {questions[currentQuestion]?.optionc ? (
                  <div className="optionButton">
                    <button
                      className={`optionBtn ${setAnswerStatusClass("c")}`}
                    >
                      {questions[currentQuestion]?.optionc}
                    </button>
                  </div>
                ) : (
                  ""
                )}
                {questions[currentQuestion]?.optiond ? (
                  <div className="optionButton">
                    <button
                      className={`optionBtn ${setAnswerStatusClass("d")}`}
                    >
                      {questions[currentQuestion]?.optiond}
                    </button>
                  </div>
                ) : (
                  ""
                )}
                {questions[currentQuestion]?.optione ? (
                  <div className="optionButton">
                    <button
                      className={`optionBtn ${setAnswerStatusClass("e")}`}
                    >
                      {questions[currentQuestion]?.optione}
                    </button>
                  </div>
                ) : (
                  ""
                )}
              </>
            ) : (
              ""
            )}
            {!questions[currentQuestion]?.selected_answer ? (
              <div className="text-end">
                <span className="">*{t("not_att")}</span>
              </div>
            ) : (
              ""
            )}
          </div>
        </div>
      </div>
      <div className="flex justify-evenly mb-14 mt-6">
        <div className="">
          <button
            className="reviewBtn"
            onClick={previousQuestion}
            disabled={disablePrev}
          >
            &lt;
          </button>
        </div>
        <div className="">
          <button className="reviewBtn" onClick={goBack}>
            {t("back")}
          </button>
        </div>
        <div className="">
          <button
            className="reviewBtn"
            onClick={nextQuestion}
            disabled={disableNext}
          >
            &gt;
          </button>
        </div>
      </div>
      <div className="text-center">
        <div className="flex flex-start mt-5 my-2 text-bold">
          {questions[currentQuestion]?.note ? (
            <p className="text-lg">{t("note") + " : " + questions[currentQuestion]?.note}</p>
          ) : (
            ""
          )}
        </div>
      </div>
    </React.Fragment>
  );
}

AudioReviewAnswer.propTypes = {
  questions: PropTypes.array.isRequired,
  goBack: PropTypes.func
}

export default withTranslation()(AudioReviewAnswer)
