import { IonButton, IonContent, IonPage, IonToast } from '@ionic/react';
// import QuizzesMainMenuContainer from '../../components/QuizzesMainMenuContainer';
import './style.css';

import { useEffect, useState } from 'react';
import { Helloworld } from '../../public_data/index';
import { writeUserConfig } from './writeUserConfig';
import { readUserConfig } from './readUserConfig';
import { deleteUserConfig } from './deleteUserConfig';
import { initUserConfig } from './initUserConfig';
import { listAllUserConfig } from './listAllUserConfig';

const DebugPage: React.FC = () => {
  let [show_meta, setShowMeta] = useState({});
  let [read_result, setReadResult] = useState('');
  let [user_config_result, setUserConfigResult] = useState({});
  useEffect(() => {
    (async () => {
      let result = await Helloworld();
      console.log(result);
      setShowMeta(result);

      localStorage.setItem('hello', 'world');
      setReadResult(localStorage.getItem('hello') || '');
    })();
  }, []);

  const [isOpen, setIsOpen] = useState(false);

  return (
    <IonPage>
      <IonContent fullscreen>
        <div>
          <div>
            <IonButton href='/Record'>Record</IonButton>
          </div>
        </div>
        <div>
          <div>
            <IonButton href='/connective_revision/result'>connective_revision_result</IonButton>
          </div>
          <div>
            <IonButton href='/connective_revision/r/technology'>connective_revision_run</IonButton>
          </div>
          <div>
            <IonButton href='/connective_revision'>connective_revision select category</IonButton>
          </div>
        </div>
        <div>
          <div>
            <IonButton href='/matching_frenzy/r/technology'>matching_frenzy_run</IonButton>
          </div>
          <div>
            <IonButton href='/matching_frenzy/result'>matching_frenzy_result</IonButton>
          </div>
          <div>
            <IonButton href='/matching_frenzy'>matching_frenzy select category</IonButton>
          </div>
        </div>
        <div>
          <IonButton expand='block' onClick={() => setIsOpen(true)}>
            Open
          </IonButton>
          <IonToast
            isOpen={isOpen}
            message='This toast will close in 5 seconds'
            onDidDismiss={() => setIsOpen(false)}
            duration={5000}
          ></IonToast>
        </div>
        <div>
          <div>
            <IonButton href='/listening_practice/Technology'>listening practice</IonButton>
          </div>
          <div>
            <IonButton href='/listening_practice/c/Technology'>listening correction</IonButton>
          </div>
          <div>
            <IonButton href='/listening_practice/finish'>listening practice finish</IonButton>
          </div>
        </div>
        <div>
          <IonButton href='/listening_practice'>listening_practice</IonButton>
          <IonButton href='/vocabulary_page'>vocabulary_page</IonButton>
          <IonButton href='/conectives_page'>conectives_page</IonButton>
        </div>

        <div>
          <IonButton
            onClick={() => {
              initUserConfig();
            }}
          >
            initUserConfig
          </IonButton>
          <IonButton
            onClick={() => {
              writeUserConfig('hello', 'world');
            }}
          >
            writeUserConfig
          </IonButton>
          <IonButton
            onClick={() => {
              setUserConfigResult(readUserConfig('hello'));
            }}
          >
            readUserConfig
          </IonButton>
          <IonButton
            onClick={() => {
              deleteUserConfig('hello');
            }}
          >
            deleteUserConfig
          </IonButton>
          <IonButton
            onClick={() => {
              setUserConfigResult(listAllUserConfig());
            }}
          >
            listAllUserConfig
          </IonButton>
          <div>{JSON.stringify(user_config_result)}</div>
        </div>
        <div>{JSON.stringify(show_meta)}</div>
        <div>1</div>
        <div
          style={{
            height: '100px',
            width: '100px',
            backgroundImage: 'url(/data/Lesson/vocabulary/Technology/images/keyboard.jpg)'
          }}
        ></div>
        <div>2</div>
        <div>{read_result}</div>
      </IonContent>
    </IonPage>
  );
};

export default DebugPage;
