import './showAlert.scss';

import classNames from 'classnames';
import html2canvas from 'html2canvas';
import React, { useContext, useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { toast } from 'react-toastify';

import { MiniAppContext } from '../../context/miniAppContext';
import { MiniAppErrorType } from '../../model/miniAppError';
import msgHandler from '../../utils/iframe/messageHandler';
import Button from '../Button/button';
import ImageIcon from '../ImageIcon';
import Input from '../Input/input';
import Modal from '../Modal/modal';
import * as log from 'loglevel';

interface Props {
  alertParams: any;
  setAlertParams: any;
  toggleMiniAppSettings?: (v: boolean) => void;
  appDetail: any;
}

const ShowAlert: React.FC<Props> = (props) => {
  const { t } = useTranslation();
  const {
    alertParams,
    setAlertParams,
    toggleMiniAppSettings,
    appDetail,
  } = props;
  const [codeValue, setCode] = useState('');
  const {
    showAlert,
    title,
    text,
    buttonTitle,
    alertBoxName,
    successCB,
    failCB,
    completeCB,
    originId,
    imageUrl,
    screenshot,
    includeAppIconWhenShare,
  } = alertParams;
  const subMenuStyle = classNames('custom-btn', {
    'custom-btn-submenu': alertBoxName === 'showMenusheet',
  });
  const [screenshoturl, setScreenshotUrl] = useState('');
  useEffect(() => {
    try {
      if (alertBoxName === 'share') {
        if (screenshot) {
          let frame = document
            .getElementsByClassName('screen')[0]
            .getElementsByTagName('iframe')[0];
          html2canvas(
            frame?.contentDocument?.documentElement as HTMLElement
          ).then((canvas) => {
            setScreenshotUrl(canvas.toDataURL());
          });
        }
      }
    } catch (e) {
      log.error(`${JSON.stringify(e)}`);
    }
  }, [alertBoxName, includeAppIconWhenShare, screenshot]);

  const { state } = useContext(MiniAppContext);
  async function okClicked() {
    if (alertBoxName === 'scanCode' && codeValue.length) {
      msgHandler(originId, successCB, { code: codeValue });
      setCode('');
    } else if (alertBoxName === 'openApp') {
      msgHandler(originId, successCB, {});
      toast.success('Opened the app');
    } else if (alertBoxName === 'getContactList') {
      msgHandler(originId, successCB, {
        contacts: [{ name: 'PayPay', telNumbers: ['080123456789'] }],
      });
    }
    finishTasks();
  }
  function cancelClicked() {
    msgHandler(originId, failCB, {
      errorCode:
        alertBoxName === 'getContactList'
          ? MiniAppErrorType.hostAppContactsDenied
          : MiniAppErrorType.userCanceled,
    });
    finishTasks();
  }
  function finishTasks() {
    if (alertBoxName !== 'share') {
      msgHandler(originId, completeCB);
    }
    setAlertParams({
      ...alertParams,
      showAlert: false,
    });
  }
  function onCodeChange(event: any) {
    setCode(event?.target.value);
  }

  const renderTopIcon = () => {
    return alertBoxName === 'showErrorSheet' ? (
      <ImageIcon src="modal/alert_warning" type="svg" />
    ) : alertBoxName === 'share' ? (
      includeAppIconWhenShare && appDetail.appLogo ? (
        <img src={appDetail.appLogo} alt="" className="app-share"></img>
      ) : null
    ) : null;
  };

  const renderTitle = () => {
    return alertBoxName === 'showMenusheet' ? (
      <div className="app-container">
        <ImageIcon customUrl={appDetail.appLogo} className="app-thumbnail" />
        <span className="app-name">{state.appName}</span>
      </div>
    ) : alertBoxName === 'openApp' ? (
      <div className="open-app-container">
        <ImageIcon src="imageToApp" className="open-app-icon" />
        <span className="title">{t('openApp.title')}</span>
      </div>
    ) : alertBoxName === 'getContactList' ? (
      <div className="get-contact">
        <ImageIcon src="passbook" className="open-app-icon" />
        <span className="title">{t('openContact.title')}</span>
      </div>
    ) : (
      <h4 className="alert-title">{title}</h4>
    );
  };

  const renderMenuItems = () => {
    return (
      <>
        {appDetail.channelId ? (
          <div className="icon-section">
            <div className="icon-container">
              <ImageIcon customUrl={appDetail.appLogo} />
            </div>
            <span className="icon-menu-title">
              ブランド
              <br />
              の詳細
            </span>
          </div>
        ) : null}
        {appDetail.menuItems?.settings == null ||
        appDetail.menuItems?.settings ? (
          <div className="icon-section">
            <div
              className="icon-container"
              onClick={() => {
                finishTasks();
                toggleMiniAppSettings && toggleMiniAppSettings(true);
              }}
              role="button"
              tabIndex={0}
            >
              <ImageIcon src="menusheet/menusheet_settings" type="svg" />
            </div>
            <span className="icon-menu-title">{t('menuSheet.settings')}</span>
          </div>
        ) : null}
        {appDetail.menuItems?.share == null || appDetail.menuItems?.share ? (
          <div className="icon-section">
            <div className="icon-container">
              <ImageIcon src="menusheet/menusheet_share" type="svg" />
            </div>
            <span className="icon-menu-title">{t('menuSheet.share')}</span>
          </div>
        ) : null}
        {appDetail.menuItems?.guidance == null ||
        appDetail.menuItems?.guidance ? (
          <div className="icon-section">
            <div className="icon-container">
              <ImageIcon src="menusheet/menusheet_guide" type="svg" />
            </div>
            <span className="icon-menu-title">
              使い方
              <br />
              ガイド
            </span>
          </div>
        ) : null}
        {appDetail.menuItems?.help == null || appDetail.menuItems?.help ? (
          <div className="icon-section">
            <div className="icon-container">
              <ImageIcon src="menusheet/menusheet_help" type="svg" />
            </div>
            <span className="icon-menu-title">{t('menuSheet.help')}</span>
          </div>
        ) : null}
      </>
    );
  };

  const renderBody = () => {
    return alertBoxName === 'showMenusheet' ? (
      <div className="setting-modal">{renderMenuItems()}</div>
    ) : alertBoxName === 'openApp' ? (
      <div className="open-app-body">
        <div>{t('openApp.openExternalApp')}</div>
        <div>{t('openApp.areYouSure')}</div>
      </div>
    ) : alertBoxName === 'getContactList' ? (
      <div className="get-contact-body">
        <div>{t('openContact.text')}</div>
      </div>
    ) : alertBoxName === 'share' ? (
      <div className="pp-share-body">
        <p className="alert-text">{text}</p>
        <img
          className="image-url"
          alt="imageurl"
          src={imageUrl ? imageUrl : screenshoturl}
        ></img>
      </div>
    ) : (
      <>
        <p className="alert-text">{text}</p>
        {renderScanCodeInput()}
      </>
    );
  };

  const renderScanCodeInput = () => {
    return alertBoxName === 'scanCode' ? (
      <Input
        value={codeValue}
        placeholder="Please enter code here"
        onChange={onCodeChange}
      ></Input>
    ) : null;
  };
  const renderFooter = () => {
    return (
      <>
        <Button
          btnType={
            ['showMenusheet'].indexOf(alertBoxName) > -1 ? 'default' : 'primary'
          }
          className={subMenuStyle}
          onClick={() => {
            okClicked();
          }}
        >
          {alertBoxName === 'showErrorSheet' ? t('button.close') : buttonTitle}
        </Button>
        {['scanCode', 'openApp', 'getContactList'].indexOf(alertBoxName) >
        -1 ? (
          <Button
            btnType={
              ['openApp', 'getContactList'].indexOf(alertBoxName) > -1
                ? 'link'
                : 'danger'
            }
            className="btn-cancel"
            onClick={() => {
              cancelClicked();
            }}
          >
            {t('button.cancel')}
          </Button>
        ) : null}
      </>
    );
  };

  return (
    <Modal visible={showAlert}>
      <div className="modal-content">
        {renderTopIcon()}
        <div className="modal-header">{renderTitle()}</div>
        <div className="modal-body">{renderBody()}</div>
        <div className="modal-footer">{renderFooter()}</div>
      </div>
    </Modal>
  );
};

export default ShowAlert;