import { useEffect, useState } from 'react';
import { Helloworld } from '../../public_data';
import { IonButton, IonContent, IonPage, IonToast } from '@ionic/react';
import { HelloworldImage } from '../../components/HelloworldImage';

function ConnectiveRevisionQuizRun() {
  let [show_meta, setShowMeta] = useState({});
  useEffect(() => {
    (async () => {
      let result = await Helloworld();
      console.log(result);
      setShowMeta(result);
    })();
  }, []);

  const [isOpenToastCorrect, setIsOpenToastCorrect] = useState(false);
  const [isOpenToastWrong, setIsOpenToastWrong] = useState(false);

  return (
    <>
      <IonPage>
        <IonContent fullscreen>
          {/*  */}

          <div
            style={{
              display: 'flex',
              flexDirection: 'column',
              justifyContent: 'center',
              alignItems: 'center',
              //
              margin: '1rem 1rem 1rem'
            }}
          >
            <div style={{ fontSize: '1.3rem' }}>
              Quiz 1 Q.{1}/{10}
            </div>
            <div style={{ marginTop: '1rem', textAlign: 'center' }}>
              Read the text below and choose the best connective.
            </div>
            <div
              style={{
                marginTop: '1rem',
                padding: '3rem',
                border: '1px solid black',
                borderRadius: '1rem'
              }}
            >
              He likes apples _____ not grapes.
            </div>
            <div
              style={{
                marginTop: '1rem',
                width: '80%',
                display: 'flex',
                flexDirection: 'column'
              }}
            >
              <div>
                <IonButton expand='block'>but</IonButton>
              </div>
              <div>
                <IonButton expand='block'>and</IonButton>
              </div>
              <div>
                <IonButton expand='block'>not</IonButton>
              </div>
            </div>
          </div>
          {/*  */}
          <IonToast
            isOpen={isOpenToastCorrect}
            message='This answer is correct'
            onDidDismiss={() => setIsOpenToastCorrect(false)}
            duration={5000}
          ></IonToast>
          <IonToast
            isOpen={isOpenToastWrong}
            message='This answer is wrong'
            onDidDismiss={() => setIsOpenToastWrong(false)}
            duration={5000}
          ></IonToast>
        </IonContent>
      </IonPage>
    </>
  );
}

export default ConnectiveRevisionQuizRun;
