import { IonButton, IonIcon, IonModal } from '@ionic/react';
import { useEffect, useRef, useState } from 'react';
import { ATTENTIVE_EARS_STAGES, COLOR_TEXT } from '../../../../constants';
import { closeOutline } from 'ionicons/icons';

import './style.css';

function CongratHelloworld({}: {}) {
  const modal = useRef<HTMLIonModalElement>(null);
  const [opened, setOpened] = useState(false);
  // const message = '';
  const [message, setMessage] = useState('');
  const [openCongratListeningProgress, setOpenCongratListeningProgress] = useState(false);
  const [progress, setProgress] = useState(0);
  const [count_to_prompt, setCountToPrompt] = useState(0);

  const dismiss_modal = () => {
    setOpened(false);
  };

  useEffect(() => {}, [progress]);

  useEffect(() => {
    (async () => {})();
  }, []);

  return (
    <>
      <IonModal
        id='congratulation-listening-progress-modal'
        ref={modal}
        trigger='open-custom-dialog'
        onIonModalWillDismiss={() => dismiss_modal()}
        isOpen={opened}
      >
        <div
          style={{
            height: '100%',
            display: 'flex',
            flexDirection: 'column',
            alignItems: 'center',
            justifyContent: 'center',
            gap: '1rem',
            color: COLOR_TEXT
          }}
        >
          <div>
            <h1>Congratulation!</h1>
          </div>

          <div>{'Genius'}</div>

          <div
            style={{
              display: 'flex',
              flexDirection: 'column',
              alignItems: 'center',
              justifyContent: 'center',
              gap: '0.25rem'
            }}
          >
            <div>{message}</div>
          </div>
        </div>

        <IonButton
          color='light'
          shape='round'
          style={{ position: 'absolute', top: '5px', right: '5px' }}
          onClick={() => dismiss_modal()}
        >
          <IonIcon slot='icon-only' icon={closeOutline}></IonIcon>
        </IonButton>
      </IonModal>
    </>
  );
}

export default CongratHelloworld;
