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

function CongratulationAchievementModal({
  opened,
  setOpened,
  count_prompted,
  message = 'hello message'
}: {
  message?: string;
  opened: boolean;
  count_prompted: number;
  setOpened: (opened: boolean) => void;
}) {
  const modal = useRef<HTMLIonModalElement>(null);

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

  return (
    <>
      <IonModal
        id='example-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 CongratulationAchievementModal;
