function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }

function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }

function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }

function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }

function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }

function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }

function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }

function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }

function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }

function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }

import { Button, Icon, Input, Row } from '@whalecloud/fdx';
import React, { useEffect, useState } from 'react';
import { closeIcon, linkIcon, unlinkIcon } from '../../../assets/IconBase64';
import CommonMaterialLibrary from '../../../composite-comp/dito/config-panels/components/CommonMaterialLibrary';
import LinkModal from '../../../composite-comp/dito/config-panels/components/LinkModal/index';
import './index.less';

var ImageLinks = function ImageLinks(props) {
  var _props$value = props.value,
      value = _props$value === void 0 ? [] : _props$value,
      _props$maxCount = props.maxCount,
      maxCount = _props$maxCount === void 0 ? 10 : _props$maxCount,
      onChange = props.onChange;

  var _useState = useState(false),
      _useState2 = _slicedToArray(_useState, 2),
      visible = _useState2[0],
      setVisible = _useState2[1];

  var _useState3 = useState(0),
      _useState4 = _slicedToArray(_useState3, 2),
      itemIndex = _useState4[0],
      setItemIndex = _useState4[1];

  var _useState5 = useState(value),
      _useState6 = _slicedToArray(_useState5, 2),
      images = _useState6[0],
      setImages = _useState6[1];

  useEffect(function () {
    setImages(value);
  }, [value]);

  var onImagesChange = function onImagesChange(imgs) {
    setImages(imgs);
    onChange(imgs);
  };

  var showModal = function showModal(index) {
    setVisible(true);
    setItemIndex(index);
  };

  var closeModal = function closeModal() {
    return setVisible(false);
  };

  var setImgLink = function setImgLink(index, val) {
    var arr = JSON.parse(JSON.stringify(images));
    arr[index].link = val;
    onImagesChange(arr);
  };

  var uploadImgUrl = function uploadImgUrl(index, url) {
    var arr = JSON.parse(JSON.stringify(images));
    console.log('arr', arr);
    arr[index].imgUrl = url;
    onImagesChange(arr);
  };

  var handleModalSave = function handleModalSave(url) {
    setImgLink(itemIndex, url);
    closeModal();
  };

  var previewImg = function previewImg(url) {
    window.open(url);
  };

  var addNewItem = function addNewItem() {
    if (images.length >= maxCount) {
      return;
    }

    onImagesChange([].concat(_toConsumableArray(images), [{}]));
  };

  var itemUp = function itemUp(index) {
    var arr = JSON.parse(JSON.stringify(images));
    var _ref = [arr[index - 1], arr[index]];
    arr[index] = _ref[0];
    arr[index - 1] = _ref[1];
    onImagesChange(arr);
  };

  var itemDown = function itemDown(index) {
    var arr = JSON.parse(JSON.stringify(images));
    var _ref2 = [arr[index], arr[index + 1]];
    arr[index + 1] = _ref2[0];
    arr[index] = _ref2[1];
    onImagesChange(arr);
  };

  var delImg = function delImg(index) {
    var arr = JSON.parse(JSON.stringify(images));
    arr[index].imgUrl = '';
    onImagesChange(arr);
  };

  var delItem = function delItem(index) {
    var arr = JSON.parse(JSON.stringify(images));
    arr.splice(index, 1);
    onImagesChange(arr);
  };

  var imgItem = function imgItem(item, index) {
    var hasImg = !!item.imgUrl;
    return /*#__PURE__*/React.createElement("div", {
      className: "imgItem"
    }, /*#__PURE__*/React.createElement("div", {
      className: "imgUpload"
    }, maxCount !== 1 && /*#__PURE__*/React.createElement("div", {
      className: "move"
    }, /*#__PURE__*/React.createElement(Button, {
      onClick: function onClick() {
        return itemUp(index);
      },
      disabled: index === 0,
      style: {
        padding: '0 10px',
        height: '28px',
        marginBottom: '4px'
      }
    }, /*#__PURE__*/React.createElement(Icon, {
      type: "arrow-up"
    })), /*#__PURE__*/React.createElement(Button, {
      onClick: function onClick() {
        return itemDown(index);
      },
      disabled: index === images.length - 1,
      style: {
        padding: '0 10px',
        height: '28px'
      }
    }, /*#__PURE__*/React.createElement(Icon, {
      type: "arrow-down"
    }))), hasImg ? /*#__PURE__*/React.createElement("div", {
      className: "upload"
    }, /*#__PURE__*/React.createElement("div", {
      className: "imgModal"
    }, /*#__PURE__*/React.createElement(Icon, {
      onClick: function onClick() {
        return previewImg(item.imgUrl);
      },
      type: "eye",
      style: {
        color: '#fff',
        fontSize: 16,
        marginRight: 16,
        cursor: 'pointer'
      }
    }), /*#__PURE__*/React.createElement(Icon, {
      onClick: function onClick() {
        return delImg(index);
      },
      type: "delete",
      style: {
        color: '#fff',
        fontSize: 16,
        cursor: 'pointer'
      }
    })), /*#__PURE__*/React.createElement("img", {
      height: "58",
      src: item.imgUrl,
      alt: ""
    })) : /*#__PURE__*/React.createElement(CommonMaterialLibrary, {
      maxCount: 1,
      value: {},
      onChange: function onChange(value) {
        console.log(value);

        if (value && value[0]) {
          uploadImgUrl(index, "".concat(value[0].url || ''));
        }
      }
    })), /*#__PURE__*/React.createElement("div", {
      className: "fullUrl"
    }, /*#__PURE__*/React.createElement("div", {
      className: "urlInp"
    }, /*#__PURE__*/React.createElement(Input, {
      placeholder: "Please add a link",
      onChange: function onChange(event) {
        event.persist();
        setImgLink(index, event.target.value);
      },
      value: item.link,
      style: {
        height: '28px',
        padding: '4px 20px 4px 11px'
      }
    }), item.link ? /*#__PURE__*/React.createElement("div", {
      className: "butCot"
    }, /*#__PURE__*/React.createElement("img", {
      className: "linkBut",
      width: "14",
      src: linkIcon,
      alt: ""
    }), /*#__PURE__*/React.createElement("img", {
      onClick: function onClick() {
        return setImgLink(index, '');
      },
      className: "closeBut",
      width: "14",
      src: closeIcon,
      alt: ""
    })) : /*#__PURE__*/React.createElement("img", {
      onClick: function onClick() {
        return showModal(index);
      },
      className: "unlinkBut",
      width: "14",
      src: unlinkIcon,
      alt: ""
    })), maxCount !== 1 && /*#__PURE__*/React.createElement("div", {
      className: "delIcon"
    }, /*#__PURE__*/React.createElement(Button, {
      onClick: function onClick() {
        return delItem(index);
      },
      style: {
        padding: '0 10px',
        height: '28px'
      }
    }, /*#__PURE__*/React.createElement(Icon, {
      type: "delete"
    })))));
  };

  return /*#__PURE__*/React.createElement("div", {
    className: "addImgLink"
  }, /*#__PURE__*/React.createElement(Row, {
    className: "imgTitle",
    type: "flex",
    justify: "space-between"
  }, /*#__PURE__*/React.createElement("div", null, "Image Setting"), maxCount !== 1 && /*#__PURE__*/React.createElement("div", null, images.length, "/", maxCount)), /*#__PURE__*/React.createElement("div", {
    className: "imgCot"
  }, images.map(function (item, index) {
    return /*#__PURE__*/React.createElement(React.Fragment, {
      key: index
    }, imgItem(item, index));
  })), /*#__PURE__*/React.createElement("div", {
    className: "addBut"
  }, images.length < maxCount && /*#__PURE__*/React.createElement(Button, {
    style: {
      width: '100%'
    },
    onClick: function onClick() {
      addNewItem();
    }
  }, /*#__PURE__*/React.createElement(Icon, {
    type: "plus"
  }), " Add Image")), /*#__PURE__*/React.createElement(LinkModal, {
    visible: visible,
    handleModalSave: handleModalSave,
    closeModal: closeModal
  }));
};

export default ImageLinks;