import React from 'react';
import Modal from '../Modal/modal';
import './showUpdateWarning.scss';
import ImageIcon from '../ImageIcon';
import Button from '../Button/button';
import msgHandler from '../../utils/iframe/messageHandler';
import { useTranslation } from 'react-i18next';

interface Props {
  updateParams: any;
  setUpdateParams: any;
}

const ShowUpdateWarning: React.FC<Props> = (props) => {
  const { updateParams, setUpdateParams } = props;
  const { visible, successCB, originId } = updateParams;
  const { t } = useTranslation();

  function handleClick(value: string) {
    msgHandler(originId, successCB, { userAction: value });
    if (value === 'UPDATE') {
      const win = window.open(
        'https://itunes.apple.com/app/id1435783608',
        '_blank'
      );
      if (win) {
        win.focus();
      }
    }
    setUpdateParams({
      ...updateParams,
      visible: false,
    });
  }

  return (
    <Modal visible={visible}>
      <div className="modal-content">
        <ImageIcon className="icon-update" src="modal/app_update" type="svg" />
        <div className="modal-header">
          <h5 className="mg0">{t('updateWarning.title')}</h5>
        </div>
        <div className="modal-body">
          <p className="mg0">{t('updateWarning.detail')}</p>
        </div>
        <div className="modal-footer">
          <Button
            btnType="primary"
            onClick={() => {
              handleClick('UPDATE');
            }}
          >
            {t('button.update')}
          </Button>
          <Button
            btnType="link"
            onClick={() => {
              handleClick('IGNORE');
            }}
          >
            {t('button.cancel')}
          </Button>
        </div>
      </div>
    </Modal>
  );
};

export default ShowUpdateWarning;