import { IonButton, IonIcon, IonModal } from '@ionic/react';
import { useEffect, useRef, useState } from 'react';
import { ATTENTIVE_EARS_STAGES, COLOR_TEXT, DEBUG } from '../../../../constants';
import { closeOutline } from 'ionicons/icons';
import { useMyIonMetric } from '../../../../contexts/MyIonMetric';
import { useFullmarkCount } from '../../../../contexts/MyIonMetric/FullmarkCount';
import { useListeningPracticeTimeSpent } from '../../../../contexts/MyIonMetric/ListeningPracticeTimeSpent';

import './style.css';

function CongratListeningProgress({}: {}) {
  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 {
    myIonMetricGetListeningPracticeTimeSpent,
    myIonMetricGetListeningPracticeProgressIgnore,
    myIonMetricSetListeningPracticeProgressIgnore
  } = useListeningPracticeTimeSpent();

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

  async function promptListeningPracticeProgress(count_to_prompt: number) {
    if (count_to_prompt == (await myIonMetricGetListeningPracticeProgressIgnore()).time_spent_s) return;
    // setCountPrompted(count_to_prompt);
    setMessage('You scored full marks ' + count_to_prompt + ' times.');
    // setOpenedCongraFullmarkTimes(true);
    setOpened(true);
  }

  useEffect(() => {
    const prompt_list = ATTENTIVE_EARS_STAGES;
    const b_prompt_list = Array(prompt_list.length).fill(false);

    for (let i = 0; i < prompt_list.length; i++) {
      if (progress > prompt_list[i]) {
        b_prompt_list[i] = true;
      }
    }

    let lastTrueIndex = -1;
    for (let i = b_prompt_list.length - 1; i >= 0; i--) {
      if (b_prompt_list[i]) {
        lastTrueIndex = i;
        break;
      }
    }

    if (lastTrueIndex == -1) {
      console.log('prompt ignored');
    } else {
      setCountToPrompt(prompt_list[lastTrueIndex]);
      promptListeningPracticeProgress(prompt_list[lastTrueIndex]);
    }
  }, [progress]);

  useEffect(() => {
    (async () => {
      let temp = await myIonMetricGetListeningPracticeTimeSpent();
      setProgress(temp.time_spent_s / 60);
    })();
  }, []);

  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
          }}
        >
          {DEBUG ? <span className={'debug'}>congratulation listening progress</span> : <></>}

          <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 CongratListeningProgress;
