import React from 'react';
import Modal from '../Modal/modal';
import Button from '../Button/button';
import msgHandler from './../../utils/iframe/messageHandler';
import './openMap.scss';

interface Props {
  actionSheetParams: any;
  setActionSheetParams: any;
}

const OpenMap: React.FC<Props> = (props) => {
  const { actionSheetParams, setActionSheetParams } = props;
  const { visible, ios, successCB, failCB, originId } = actionSheetParams;
  function loadMap(map: string) {
    if (map) {
      window.open(map, '_blank');
      msgHandler(originId, successCB);
    } else {
      msgHandler(originId, failCB);
    }
    closeSheet();
  }
  function cancelClicked() {
    closeSheet();
  }
  function closeSheet() {
    setActionSheetParams({
      ...actionSheetParams,
      visible: false,
    });
  }
  return (
    <Modal visible={visible}>
      <div className="modal-content">
        <div className="modal-body">
          <ul className="mapList">
            <li className="openInMap" role="option" aria-selected="false">
              マップで開く
            </li>
            {ios?.map(function (map: any) {
              return (
                <li
                  role="option"
                  aria-selected="false"
                  onClick={() => {
                    loadMap(map.url);
                  }}
                  key={map.url}
                >
                  {map.label}
                </li>
              );
            })}
          </ul>
        </div>
        <div className="modal-footer">
          <Button
            onClick={() => {
              cancelClicked();
            }}
            btnType="link"
          >
            Cancel
          </Button>
        </div>
      </div>
    </Modal>
  );
};

export default OpenMap;