import { IonButton, IonContent, IonPage } 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') || '');
    })();
  }, []);

  return (
    <IonPage>
      <IonContent fullscreen>
        <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;
