import { IonButton, IonContent, IonModal, useIonRouter } from '@ionic/react';
import { useRef } from 'react';
import { useAppStateContext } from '../../contexts/AppState';
import { COLOR_TEXT } from '../../constants';
import { useMyIonQuizContext } from '../../contexts/MyIonQuiz';

function ConfirmUserExit() {
  let {
    setTabActive,
    show_confirm_user_exit,
    setShowConfirmUserExit,
    url_push_after_user_confirm,
    setListeningPracticeInProgress,
    setConnectiveRevisionInProgress,
    setMatchingFrenzyInProgress
  } = useAppStateContext();
  const modal = useRef<HTMLIonModalElement>(null);
  const router = useIonRouter();
  const { resetListeningPracticeCorrectionList } = useMyIonQuizContext();
  return (
    <>
      <IonModal
        isOpen={show_confirm_user_exit}
        ref={modal}
        trigger='open-modal'
        initialBreakpoint={0.25}
        breakpoints={[0, 0.25, 0.5, 0.75]}
        onDidDismiss={() => setShowConfirmUserExit(false)}
      >
        <IonContent className='ion-padding'>
          <div style={{ margin: '2rem', display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
            <div style={{ color: COLOR_TEXT }}>Are you sure want to quit ?</div>
            <div
              style={{
                margin: '2rem',
                display: 'flex',
                flexDirection: 'row',
                justifyContent: 'space-between',
                alignItems: 'center',
                gap: '3rem'
              }}
            >
              <IonButton
                color='dark'
                shape={'round'}
                style={{ minWidth: '80px' }}
                onClick={() => setShowConfirmUserExit(false)}
              >
                No
              </IonButton>
              <IonButton
                fill='outline'
                shape={'round'}
                style={{ minWidth: '80px', color: COLOR_TEXT }}
                color='dark'
                onClick={() => {
                  setShowConfirmUserExit(false);
                  setListeningPracticeInProgress(false);
                  setMatchingFrenzyInProgress(false);
                  setConnectiveRevisionInProgress(false);
                  //
                  resetListeningPracticeCorrectionList();
                  //
                  setTabActive(url_push_after_user_confirm);
                  //
                  router.push(url_push_after_user_confirm, 'none', 'replace');
                }}
              >
                Yes
              </IonButton>
            </div>
          </div>
        </IonContent>
      </IonModal>
    </>
  );
}

export default ConfirmUserExit;
