import { useRef } from 'react';
import { IonButton, IonModal, IonIcon } from '@ionic/react';
import { closeOutline } from 'ionicons/icons';
import MissingSvg from './image.svg';

import './style.css';
import { COLOR_TEXT } from '../../constants';

export interface NoFavoriteVocabModalProps {
  open: boolean;
  setOpen: (open: boolean) => void;
}

function NoFavoriteVocabModal({ open, setOpen }: NoFavoriteVocabModalProps) {
  const modal = useRef<HTMLIonModalElement>(null);

  function dismiss() {
    modal.current?.dismiss();
  }

  return (
    <IonModal
      id='no-favorite-connectives-modal'
      ref={modal}
      trigger='open-custom-dialog'
      isOpen={open}
      onIonModalDidDismiss={() => setOpen(false)}
    >
      <div
        style={{
          padding: '1rem',

          display: 'flex',
          flexDirection: 'column',
          alignItems: 'center',
          justifyContent: 'center',
          gap: '1rem',
          height: '100%'
        }}
      >
        <div
          style={{
            display: 'flex',
            flexDirection: 'column',
            alignItems: 'center',
            justifyContent: 'center',
            gap: '1rem',
            color: COLOR_TEXT
          }}
        >
          <div
            style={{
              display: 'flex',
              flexDirection: 'column',
              alignItems: 'center',
              justifyContent: 'center',
              gap: '0.25rem'
            }}
          >
            <div
              style={{
                height: '33vw',
                width: '33vw',
                backgroundImage: `url(${MissingSvg})`,
                backgroundSize: 'contain',
                backgroundRepeat: 'no-repeat',
                backgroundPosition: 'center'
              }}
            ></div>
            <div style={{ marginTop: '1rem' }}>You have currently no favorite</div>
            <div> Vocabulary</div>
          </div>
        </div>

        <IonButton
          color='light'
          shape='round'
          style={{
            width: '1rem',
            height: '1rem',

            position: 'absolute',
            top: '0.5rem',
            right: '0.5rem'
          }}
          onClick={() => setOpen(false)}
        >
          <IonIcon slot={'icon-only'} icon={closeOutline}></IonIcon>
        </IonButton>
      </div>
    </IonModal>
  );
}

export default NoFavoriteVocabModal;
