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

interface AudioSeekBarProps {
  show_confirm_user_exit: boolean;
  setShowConfirmUserExit: Dispatch<SetStateAction<boolean>>;
  url_push_after_user_confirm: string;
}

const ConfirmUserQuitQuiz: FunctionComponent<AudioSeekBarProps> = ({
  show_confirm_user_exit,
  setShowConfirmUserExit,
  //
  url_push_after_user_confirm,
}) => {
  let { setListeningPracticeInProgress, setConnectiveRevisionInProgress, setMatchingFrenzyInProgress } =
    useAppStateContext();
  let { setTabActive } = 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 ConfirmUserQuitQuiz;