import { useEffect, useState } from 'react';
import { listMatchingFrenzyContent } from '../../../public_data';
import { IonContent, IonPage } from '@ionic/react';
import { useMyIonQuizContext } from '../../../contexts/MyIonQuiz';
import { LoadingScreen } from '../../../components/LoadingScreen';
import { MatchingFrenzyResult, MatchingFrezyRanking } from '../../../contexts/MatchingFrezyRanking';
import { QUIZ_MAIN_MENU_LINK } from '../../../constants';
import { useAppStateContext } from '../../../contexts/AppState';

function MatchingFrenzyMatchResult() {
  let { matching_frenzy_result, matching_frenzy_current_test, loadMatchingFrenzyScoreBoard } = useMyIonQuizContext();
  let [ranking, setRanking] = useState<MatchingFrenzyResult[] | []>([]);
  const { setTabActive, setDisableUserTap } = useAppStateContext();

  const [current_question_meta, setCurrentQuestionMeta] = useState<any>(undefined);

  useEffect(() => {
    (async () => {
      const res_json = await listMatchingFrenzyContent();
      setCurrentQuestionMeta(res_json[0]);

      let temp: MatchingFrezyRanking = await loadMatchingFrenzyScoreBoard(matching_frenzy_current_test.toString());

      let ranking: MatchingFrenzyResult[] = temp['ranking'];
      setRanking(ranking);
    })();

    setTabActive(QUIZ_MAIN_MENU_LINK);
    setDisableUserTap(false);
  }, []);

  if (!current_question_meta) return <LoadingScreen />;
  // if (ranking.length == 0) return <>list is empty</>;

  return (
    <>
      <IonPage>
        <IonContent fullscreen>
          <div
            style={{
              height: '85vh',
              display: 'flex',
              flexDirection: 'column',
              alignItems: 'center',
              justifyContent: 'center'
            }}
          >
            <div
              style={{
                display: 'flex',
                flexDirection: 'column',
                alignItems: 'center'
              }}
            >
              <div
                style={{
                  width: '50vw',
                  height: '50vw',
                  borderRadius: '1rem',
                  backgroundSize: 'cover',
                  backgroundPosition: 'center',
                  backgroundImage: `url(${current_question_meta.cat_image})`
                }}
              ></div>
              <div style={{ fontSize: '1.3rem', textDecoration: 'underline', marginTop: '1rem' }}>
                <div>{current_question_meta.cat_name}</div>
              </div>
              <div style={{ fontSize: '2rem', marginTop: '1rem' }}>
                <div>Well Done</div>
              </div>
              <div style={{ marginTop: '0.5rem' }}>
                <div>
                  {'Matches made:'}
                  {matching_frenzy_result}
                </div>
              </div>
              <div>
                <div style={{ width: '66vw', marginTop: '1rem' }}>
                  <div
                    style={{
                      display: 'flex',
                      flexDirection: 'row',
                      justifyContent: 'center',
                      alignItems: 'center',
                      padding: '1rem',
                      backgroundColor: 'green',
                      color: 'white'
                    }}
                  >
                    Scoreboard
                  </div>
                  {ranking.map((r, i) => (
                    <div
                      key={i}
                      style={{
                        padding: '0.5rem',
                        display: 'flex',
                        justifyContent: 'space-between',
                        borderLeft: '1px solid grey',
                        borderRight: '1px solid grey',
                        borderBottom: '1px solid grey'
                      }}
                    >
                      <div>{`${r.date}`}</div>
                      <div>{`${r.result}`}</div>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          </div>
        </IonContent>
      </IonPage>
    </>
  );
}

export default MatchingFrenzyMatchResult;
