import React, { useRef, useContext, useEffect, useState } from 'react';
import { createPortal } from 'react-dom';
import MapUtil from './../MapUtil';
import Page from './../Page';
import Header from './../Header';
import Container from './../Container';
import Notice from './../Notice';
import Bridge from './../Bridge';
import Wrapper from './Wrapper';
import Close from './Close';
import helper from './helper';
import Context from './../Context/instance.js';

function MapView(_ref) {
  var ak = _ref.ak,
      _ref$show = _ref.show,
      show = _ref$show === undefined ? true : _ref$show,
      portal = _ref.portal,
      caption = _ref.caption,
      onHide = _ref.onHide,
      _ref$center = _ref.center,
      center = _ref$center === undefined ? '江苏省,南京市' : _ref$center,
      points = _ref.points,
      circle = _ref.circle,
      polygon = _ref.polygon,
      district = _ref.district,
      header = _ref.header,
      children = _ref.children;

  // context
  var context = useContext(Context) || {};
  var locale = context.locale || function (key) {
    return key || '';
  };

  var refWrapperEl = useRef(null);

  var _useState = useState(''),
      errMsg = _useState[0],
      setErrMsg = _useState[1];

  useEffect(function () {
    if (!window.BMap && !ak) {
      setErrMsg(locale('请传入百度地图ak', 'hint_map_ak'));
      return;
    }
    MapUtil.load({
      ak: ak,
      success: function success() {
        initData();
      },
      fail: function fail() {
        setErrMsg(locale('地图库加载失败, 请稍后再试', 'hint_map_failed_load'));
      }
    });
    // 移除组件时注销
    return function () {
      helper.destroy();
    };
  }, []); // eslint-disable-line

  // 隐藏时, 移除标注
  // useEffect(() => {
  //   if (show === false) {
  //     helper.destroy();
  //   }
  // }, [show])

  // 初始化地图
  function initData() {
    if (!window.BMap) {
      // 如果有高德地图, 则加上 || !window.AMap
      setErrMsg(locale('地图库加载失败, 请稍后再试', 'hint_map_failed_load'));
      return;
    }
    console.log('初始化地图' + center);
    if (!refWrapperEl.current) {
      setErrMsg(locale('地图容器不存在', 'hint_map_no_container'));
      return;
    }

    helper.initMap(refWrapperEl.current, center, function (result) {
      if (typeof result === 'string') {
        setErrMsg(result);
        return;
      }
    });
  }

  // 绘制标记点
  useEffect(function () {
    if (points && points.length && show) {
      console.log('绘制标记');
      helper.drawMarkers(points);
    }
  }, [points]); // eslint-disable-line

  // 绘制圆形
  useEffect(function () {
    if (circle && circle.point && show) {
      console.log('绘制圆形');
      helper.drawCircle(circle.point, circle.radius);
    }
  }, [circle]); // eslint-disable-line

  // 绘制多边形
  useEffect(function () {
    if (polygon && show) {
      console.log('绘制多边形');
      helper.drawPolygon(polygon);
    }
  }, [polygon]); // eslint-disable-line

  // 绘制地区
  useEffect(function () {
    if (district && show) {
      console.log('绘制区域');
      var districtName = [];
      for (var name in district) {
        districtName.push(district[name].name);
      }
      helper.drawDistrict(districtName.join(','));
    }
  }, [district]); // eslint-disable-line

  // 标题
  useEffect(function () {
    if (caption && show) {
      Bridge.setTitle(caption);
    }
  }, [caption]);

  // 中断绘制
  useEffect(function () {
    if (show) {
      if (errMsg) {
        helper.abort = true;
      } else {
        helper.abort = false;
      }
    }
  }, [errMsg]);

  var DOM = React.createElement(
    Page,
    { className: show ? '' : 'hide' },
    header && React.createElement(
      Header,
      null,
      header
    ),
    React.createElement(
      Container,
      null,
      React.createElement(Wrapper, { ref: refWrapperEl }),
      onHide && React.createElement(Close, { onClick: onHide }),
      children
    ),
    errMsg && React.createElement(Notice, { caption: errMsg })
  );
  if (portal) {
    return createPortal(DOM, portal);
  }
  return DOM;
}
export default MapView;