'use client';
import { useEffect, useState } from 'react'
import { Dialog, DialogPanel } from '@headlessui/react'
import { Bars3Icon, XMarkIcon } from '@heroicons/react/24/outline'
import Logo from '../../components/logo';
import { CheckIcon } from '@heroicons/react/20/solid';
import { SessionState } from '@/app/lib/session';
import { AnswerType, Question, getQuestions } from '@/app/lib/question';
import QuestionView from '@/app/components/question_component';
import ResultScreen from '@/app/results/page';


const Page = ({ params }: { params: { category: string }}) => {
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
  const [state, setState]: [SessionState, any] = useState<SessionState>( {
    answered: 0,
    wrong: 0,
    right: 0,
    category: '',
    opened: [],
    answer: [],
    index: 0
  } );
  
  // const category = params.category;
  
  // const [all_questions, set_all_questions] = useState<Question[]>([]);
  const [questions, setQuestions] = useState<Question[]>([]);

  useEffect( () => {
    // console.log( params.category );
    const fetch_all_questions = async () => {
      let result = await getQuestions();
      console.log( `all_questions: ${ JSON.stringify( result ) }` );
      // set_all_questions( result );
      result = result.filter( q => q.category === params.category)
      .map(it=>({...it, answered: AnswerType.Unset}));
      //result = result.filter
      setQuestions( result );
      console.log( `q12 uestions: ${ JSON.stringify( questions ) }`, result );
    }
    fetch_all_questions();
  
    var ans: AnswerType[];
    questions?.forEach(q => {
      ans[ q.id ] = AnswerType.Unset;
    });
  
  /*  
    setState( (prevState: SessionState) => ({
      ...prevState,
      answer: ans
    }));
    */
  }, [ params.category ]);

   console.log( "questions16", questions );
   

  console.log( "state15", state );

  // alternate version (show all of them at the same time):
  // {/* {questions.map( (q) => (q.answered == AnswerType.Unset) ? <QuestionView key = {q.id} question={q} state={state} setState={setState}/> : <></>)} */}

  const index = state.answered;
  console.log( "index18", index )
  return (
    <div>

      <div className="relative isolate px-6 pt-14 lg:px-8">
      <div style={{paddingTop: '72px'}}></div>
        <Logo/>
        <div
          className="absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80"
          aria-hidden="true"
        >
          <div
            className="relative left-[calc(50%-11rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 rotate-[30deg] bg-gradient-to-tr from-[#ff80b5] to-[#9089fc] opacity-30 sm:left-[calc(50%-30rem)] sm:w-[72.1875rem]"
            style={{
              clipPath:
                'polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)',
            }}
          />
        </div>
        <div style={{paddingTop: '72px'}}></div>
        
        {questions[ index ] ? (<QuestionView question={questions[ index ]} state = {state} setState={setState}/>) : <ResultScreen state={state}/>}

        <div
          className="absolute inset-x-0 top-[calc(100%-13rem)] -z-10 transform-gpu overflow-hidden blur-3xl sm:top-[calc(100%-30rem)]"
          aria-hidden="true"
        >
          <div
            className="relative left-[calc(50%+3rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 bg-gradient-to-tr from-[#ff80b5] to-[#9089fc] opacity-30 sm:left-[calc(50%+36rem)] sm:w-[72.1875rem]"
            style={{
              clipPath:
                'polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)',
            }}
          />
        </div>
      </div>
    </div>
  )
}

export default Page;