import { IonButton, IonContent, IonPage, useIonRouter } from '@ionic/react';
import './style.css';
import { useAppStateContext } from '../../contexts/AppState';
import { useMyIonMetric } from '../../contexts/MyIonMetric';
import { useFullmarkCount } from '../../contexts/MyIonMetric/FullmarkCount';
import { useListeningPracticeTimeSpent } from '../../contexts/MyIonMetric/ListeningPracticeTimeSpent';
import { useMatchingFrenzyCorrectCount } from '../../contexts/MyIonMetric/MatchingFrenzyCorrectCount';
import { useConnectivesRevisionCorrectCount } from '../../contexts/MyIonMetric/ConnectivesRevisionCorrectCount';
import { useAppUseTime } from '../../contexts/MyIonMetric/AppUseTime';
import { MyIonQuizProvider, useMyIonQuizContext } from '../../contexts/MyIonQuiz';

const DebugPage: React.FC = () => {
  // Genius
  const { myIonMetricSetFullMarkCount } = useFullmarkCount();

  // hardworker
  const { myIonMetricSetAppUseTime } = useAppUseTime();

  // Attentive ears
  const { myIonMetricSetListeningPracticeProgress } = useListeningPracticeTimeSpent();

  // matchmaking
  const { myIonMetricSetMatchingFrenzyCorrectCount } = useMatchingFrenzyCorrectCount();

  // connecives conqueror
  const { myIonMetricSetConnectivesRevisionCorrectCount } = useConnectivesRevisionCorrectCount();

  //
  const { appendToListeningPracticeCorrectionList, setListeningPracticeCorrectionList } = useMyIonQuizContext();
  const router = useIonRouter();
  return (
    <IonPage>
      <IonContent fullscreen>
        <div>debug page</div>
        <div>
          <IonButton
            onClick={() => {
              setListeningPracticeCorrectionList([
                {
                  test_s: 'test_s',
                  test_i: 1,
                  image: 'https://docs-demo.ionic.io/assets/madison.jpg',
                  sound: '/helloworld.mp3',
                  word: 'mouse',
                  word_c: 'T_鍵盤 00',
                  sample_e: 'T_I buy a keyboard to type 00',
                  sample_c: "T_我買了一個<span className='bold'>鍵盤</span>來打字"
                },
                {
                  test_s: 'test_s',
                  test_i: 1,
                  image: 'https://docs-demo.ionic.io/assets/madison.jpg',
                  sound: '/helloworld.mp3',
                  word: 'keyboard',
                  word_c: 'T_鍵盤 00',
                  sample_e: 'T_I buy a keyboard to type 00',
                  sample_c: "T_我買了一個<span className='bold'>鍵盤</span>來打字"
                },
                {
                  test_s: 'test_s',
                  test_i: 1,
                  image: 'https://docs-demo.ionic.io/assets/madison.jpg',
                  sound: '/helloworld.mp3',
                  word: 'monitor',
                  word_c: 'T_鍵盤 00',
                  sample_e: 'T_I buy a keyboard to type 00',
                  sample_c: "T_我買了一個<span className='bold'>鍵盤</span>來打字"
                }
              ]);
            }}
          >
            appendToListeningPracticeCorrectionList()
          </IonButton>
        </div>
        <IonButton
          onClick={() => {
            router.push('/listening_practice/c/0');
          }}
        >
          go to correction
        </IonButton>
        <div>
          <IonButton
            onClick={() => {
              myIonMetricSetFullMarkCount(1001);
            }}
          >
            set count (Genius)
          </IonButton>
        </div>

        <div>
          <IonButton
            onClick={() => {
              myIonMetricSetAppUseTime(600);
            }}
          >
            set count (hardworker)
          </IonButton>
        </div>

        <div>
          <IonButton
            onClick={() => {
              myIonMetricSetListeningPracticeProgress(610);
            }}
          >
            set count (attentive ears)
          </IonButton>
        </div>

        <div>
          <IonButton
            onClick={() => {
              myIonMetricSetMatchingFrenzyCorrectCount(40);
            }}
          >
            set count (matchmaking)
          </IonButton>
        </div>

        <div>
          <IonButton
            onClick={() => {
              myIonMetricSetConnectivesRevisionCorrectCount(40);
            }}
          >
            set count (connectives)
          </IonButton>
        </div>
      </IonContent>
    </IonPage>
  );
};

export default DebugPage;
