import { ReactComponentElement, ReactNode } from "react";
import { AnswerType, Question } from "../lib/question";
import { SessionState } from "../lib/session";

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,
      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.text}
        </h1>
        {state.opened[ question.id ] ? (
          <p className="mt-6 text-lg leading-8 text-gray-200">
            {question.answer}
          </p>
        ) : null}
        <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-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>
    </div>
  )
}

export default QuestionView;