var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }

import React, { forwardRef, useRef, useImperativeHandle, useEffect, useContext, useState } from 'react';
import Instance from './instance.js';
import BridgeBrowser from './../Bridge/browser';
import Context from '../Context/instance.js';

var loaded = 0; // eslint-disable-line

var Vott = forwardRef(function (_ref, ref) {
  var src = _ref.src,
      _ref$data = _ref.data,
      data = _ref$data === undefined ? [] : _ref$data,
      _ref$params = _ref.params,
      params = _ref$params === undefined ? {} : _ref$params,
      _ref$readOnly = _ref.readOnly,
      readOnly = _ref$readOnly === undefined ? true : _ref$readOnly,
      _ref$preview = _ref.preview,
      preview = _ref$preview === undefined ? true : _ref$preview,
      watermark = _ref.watermark,
      onChange = _ref.onChange,
      others = _objectWithoutProperties(_ref, ['src', 'data', 'params', 'readOnly', 'preview', 'watermark', 'onChange']);

  var refEl = useRef(null);
  useImperativeHandle(ref, function () {
    return refEl.current;
  });
  var instance = useRef(null);
  // context
  var context = useContext(Context) || {};
  var locale = context.locale || {};
  useEffect(function () {
    if (instance.current) instance.current.updateParams(params);
  }, [params]);

  useEffect(function () {
    if (instance.current) instance.current.setReadOnly(readOnly);
  }, [readOnly]);

  useEffect(function () {
    if (instance.current) {
      instance.current.updateParams({ src: src });
      loaded = 0;
      instance.current.update();
    }
  }, [src]);

  useEffect(function () {
    if (instance.current) {
      instance.current.updateParams({ data: data });
      loaded = 0;
      instance.current.update();
    }
  }, [data]);

  useEffect(function () {
    instance.current = new Instance(refEl.current, _extends({
      readOnly: readOnly,
      data: data,
      src: src,
      onSuccess: load,
      onChange: change
    }, params));
  }, []); // eslint-disable-line

  // 更新句柄, 防止synchronization模式, 每次组件在render的时候都生成上次render的state、function、effects
  if (instance.current) {
    instance.current.params.onChange = change;
  }

  function change(s, item, list) {
    if (refEl.current) s.target = refEl.current;
    if (onChange) onChange(s, item, list);
  }
  function load() {
    loaded = 1;
  }
  function click() {
    previewImage();
  }
  function previewImage() {
    if (!readOnly || !preview || !loaded) return;
    // 克隆Wrapper
    var wrapper = instance.current.wrapper;

    var previewHTML = '<div class="preview-layer"> <div class="vott-wrapper">' + wrapper.innerHTML + '</div></div>';
    BridgeBrowser.previewImage({ urls: [src], layerHTML: previewHTML, success: function success(s) {
        var layer = s.container.querySelector('.preview-layer');
        wrapper = s.container.querySelector('.vott-wrapper');
        var svg = wrapper.querySelector('.vott-svg');
        svg.style.backgroundImage = 'initial';
        // 计算宽高
        var width = svg.style.width.replace('px', '');
        var height = svg.style.height.replace('px', '');
        var scale = 1;
        if (width > height) {
          // 宽图计算
          scale = layer.clientWidth / width;
        } else {
          // 长图计算
          scale = layer.clientHeight / height;
        }
        wrapper.style.WebkitTransform = 'scale(' + scale + ') translate(-50%,-50%)';
        wrapper.style.WebkitTransformOrigin = '0 0';
      } });
  }

  return React.createElement(
    'div',
    _extends({ ref: refEl }, others, { className: 'vott-container' + (others.className ? ' ' + others.className : '') }),
    React.createElement(
      'div',
      { className: 'vott-wrapper', onClick: click },
      React.createElement('svg', { className: 'vott-svg', preserveAspectRatio: 'none' }),
      watermark && React.createElement('div', { className: 'vott-watermark', style: { backgroundImage: 'url(' + watermark + ')' } })
    ),
    React.createElement(
      'div',
      { className: 'vott-loading active' },
      React.createElement('div', { className: 'vott-loading-icon' })
    ),
    React.createElement(
      'div',
      { className: 'vott-error' },
      React.createElement('div', { className: 'vott-error-icon' }),
      React.createElement(
        'div',
        { className: 'vott-error-caption' },
        locale['hint_image_failed_to_load'] || '图片加载失败'
      )
    )
  );
});

export default Vott;