import './modalWebview.scss';

import React, { useContext, useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';

import { IonButton, IonButtons, IonToolbar } from '@ionic/react';

import Frame from '../../components/Frame';
import Modal from '../../components/Modal';
import { MiniAppContext } from '../../context/miniAppContext';
import { MiniAppView } from '../../model/miniAppView';

interface Props {
  visible: boolean;
  toggleVisible: (v: boolean) => void;
  view: MiniAppView;
}

const ModalWebview: React.FC<Props> = (props) => {
  const { t } = useTranslation();
  const { visible, view, toggleVisible } = props;
  const { state, dispatch } = useContext(MiniAppContext);
  const [navigationStyle, setNavigationStyle] = useState('none');
  useEffect(() => {
    if (state.window.navigationStyle !== 'none' && visible) {
      setNavigationStyle(state.window.navigationStyle || 'none');
      dispatch({
        type: 'UPDATE_WINDOW',
        payload: { navigationStyle: 'none' },
      });
    }
    if (!visible && navigationStyle !== 'none') {
      dispatch({
        type: 'UPDATE_WINDOW',
        payload: { navigationStyle },
      });
    }
  }, [state.window.navigationStyle, dispatch, visible, navigationStyle]);

  const closeWebview = () => {
    toggleVisible(false);
  };
  return (
    <Modal visible={visible} className="ModalWebview">
      <IonToolbar className="ModalWebview-toolbar">
        <IonButtons slot="start">
          <IonButton onClick={closeWebview}>{t('button.close')}</IonButton>
        </IonButtons>
      </IonToolbar>
      <Frame view={view} />
    </Modal>
  );
};

export default ModalWebview;