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

import './style.css';
import { useFullmarkCount } from '../../../../contexts/MyIonMetric/FullmarkCount';
import { useAppStateContext } from '../../../../contexts/AppState';

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

  const { myIonMetricGetFullMarkCount, myIonMetricGetFullMarkIgnore, myIonMetricSetFullMarkIgnore } =
    useFullmarkCount();

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

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

  useEffect(() => {
    const prompt_list = GENIUS_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 {
      console.log({ progress });
      setCountToPrompt(prompt_list[lastTrueIndex]);
      promptGeniusProgress(prompt_list[lastTrueIndex]);
    }
  }, [progress]);

  let { tab_active } = useAppStateContext();
  useEffect(() => {
    (async () => {
      let temp = await myIonMetricGetFullMarkCount();
      setProgress(temp.count);
    })();
  }, []);

  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 genius</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 CongratGenius;
