import { ReactComponentElement, ReactNode } from "react";
import { AnswerType, Question } from "../lib/question";
import { SessionState } from "../lib/session";
import { CheckCircleIcon, XCircleIcon } from "@heroicons/react/24/outline";

const QuestionView = ({ question, setState, state }: { question: Question, setState: any, state: SessionState }) => {

  const handleOpenClick = () => {
    setState( (prevState: SessionState) => ({
      ...prevState,
      opened: {
        ...prevState.opened,
        [question.id]: !prevState.opened[ question.id ]
      }
    }))
  }

  const handleAnswerClick = (right: boolean) => {
    setState( (prevState: SessionState) => ({
      ...prevState,
      answered: prevState.answered + 1,
      wrong: prevState.wrong + (right ? 0 : 1),
      right: prevState.right + (right ? 1 : 0),
      answer: {
        ...prevState.answer,
        [question.id]: right ? AnswerType.Right : AnswerType.Wrong
      }
    }))
    question.answered = right ? AnswerType.Right : AnswerType.Wrong;
  }

  return (
    <div className="mx-auto max-w-2xl py-32 sm:py-48 lg:py-56">
      <div className="text-center">
        <h1 className="text-4xl font-bold tracking-tight text-gray-50">
          {question && question.text}
        </h1>
        {question && state.opened[ question.id ] ? (
          <div><p className="mt-6 text-lg leading-8 text-gray-200">
            {question.answer}
          </p>
          <div className="mt-10 flex items-center justify-center gap-x-6">
            <button
              onClick={() => { handleAnswerClick( true )}}
              className="rounded-md bg-indigo-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
            >
              I knew that!
            </button>
            <button
              onClick={() => {handleAnswerClick( false )}}
              className="text-sm font-semibold leading-6 text-gray-300"
            >
              I didn't know that!
            </button>
          </div>
        </div>) : (<button className="text-sm font-semibold leading-6 text-gray-200" onClick={handleOpenClick}>
            Show answer
        </button>)}
        <div className="mt-10 flex items-center justify-center gap-x-6">
          <button
            onClick={() => { handleAnswerClick( true )}}
            className="rounded-md bg-green-600 px-3.5 py-2.5 text-xs font-semibold text-white shadow-sm hover:bg-green-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
            style={{width:'30%', height:'30%'}}
          >
            <CheckCircleIcon></CheckCircleIcon>
            I knew that!
          </button>
          <button
            onClick={() => {handleAnswerClick( false )}}
            className="rounded-md bg-red-600 px-3.5 py-2.5 text-xs font-semibold text-white shadow-sm hover:bg-red-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
            style={{width:'30%', height:'30%'}}
          >
            <XCircleIcon></XCircleIcon>
            I didn't know that!
          </button>
        </div>
      </div>
    </div>
  )
}

export default QuestionView;