"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

var _fdx = require("@whalecloud/fdx");

var _react = _interopRequireWildcard(require("react"));

var _IconBase = require("../../../assets/IconBase64");

var _CommonMaterialLibrary = _interopRequireDefault(require("../../../composite-comp/dito/config-panels/components/CommonMaterialLibrary"));

var _index = _interopRequireDefault(require("../../../composite-comp/dito/config-panels/components/LinkModal/index"));

require("./index.less");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

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; }

var AddImgLink = function AddImgLink(props) {
  var title = props.title,
      imgList = props.imgList,
      maxCount = props.maxCount,
      addNewItem = props.addNewItem,
      itemUp = props.itemUp,
      itemDown = props.itemDown,
      previewImg = props.previewImg,
      delImg = props.delImg,
      delItem = props.delItem,
      uploadImgUrl = props.uploadImgUrl,
      setImgLink = props.setImgLink,
      hasTip = props.hasTip,
      renderer = props.renderer,
      hasTextInput = props.hasTextInput,
      addInfo = props.addInfo,
      setLabel = props.setLabel,
      hasPresaleTip = props.hasPresaleTip;

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

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

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

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

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

  var imgItem = function imgItem(item, index) {
    var hasImg = !!item.imgUrl;
    var hasUrl = !!item.link; // const uploadProps = {
    //   accept: 'webp,jpg,png',
    //   name: 'file',
    //   action: `${window.MParams.MBaseUrl}/image`,
    //   headers: {
    //     accessToken: localStorage.getItem('accessToken') || '',
    //     "x-csrf-token":localStorage.getItem('X-CSRF-TOKEN')||''
    //   },
    //   showUploadList: false,
    //   beforeUpload: (file, fileList) => {
    //     // uploadImgUrl(index, 'xxx');
    //     // return false;
    //   },
    //   onChange(info) {
    //     console.warn(info);
    //     if (info.file.status !== 'uploading') {
    //       console.log(info.file, info.fileList);
    //     }
    //     if (info.file.status === 'done') {
    //       uploadImgUrl(index, `${info.file.response.fullPath}`);
    //       // uploadImgUrl(index, `http://172.16.24.71:8060${info.file.response.fullPath}`);
    //       message.success(`${info.file.name} file uploaded successfully`);
    //     } else if (info.file.status === 'error') {
    //       message.error(`${info.file.name} file upload failed.`);
    //     }
    //   },
    // };

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

        if (value && value[0]) {
          uploadImgUrl(index, "".concat(value[0].url || '')); //   setStoreLogo([{
          //     url:value[0].url||'',
          //     contentId:value[0].contentId||''
          //   }])
        }
      }
    }) // <div className="uploading">
    //   <Upload {...uploadProps}>
    //     <Icon type="plus" style={{ fontSize: 32, color: '#abacb2', cursor: 'pointer' }} />
    //   </Upload>
    // </div>
    ), hasTextInput && /*#__PURE__*/_react["default"].createElement("div", {
      className: "TextInp"
    }, /*#__PURE__*/_react["default"].createElement(_fdx.Input, {
      placeholder: "Please add label",
      onChange: function onChange(event) {
        event.persist();
        setLabel(index, event.target.value);
      },
      value: item.label,
      style: {
        height: '28px',
        padding: '4px 20px 4px 11px'
      }
    })), /*#__PURE__*/_react["default"].createElement("div", {
      className: "fullUrl"
    }, /*#__PURE__*/_react["default"].createElement("div", {
      className: "urlInp"
    }, /*#__PURE__*/_react["default"].createElement(_fdx.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["default"].createElement("div", {
      className: "butCot"
    }, /*#__PURE__*/_react["default"].createElement("img", {
      className: "linkBut",
      width: "14",
      src: _IconBase.linkIcon,
      alt: ""
    }), /*#__PURE__*/_react["default"].createElement("img", {
      onClick: function onClick() {
        return setImgLink(index, '');
      },
      className: "closeBut",
      width: "14",
      src: _IconBase.closeIcon,
      alt: ""
    })) : /*#__PURE__*/_react["default"].createElement("img", {
      onClick: function onClick() {
        return showModal(index);
      },
      className: "unlinkBut",
      width: "14",
      src: _IconBase.unlinkIcon,
      alt: ""
    })), /*#__PURE__*/_react["default"].createElement("div", {
      className: "delIcon"
    }, /*#__PURE__*/_react["default"].createElement(_fdx.Button, {
      onClick: function onClick() {
        return delItem(index);
      },
      style: {
        padding: '0 10px',
        height: '28px'
      }
    }, /*#__PURE__*/_react["default"].createElement(_fdx.Icon, {
      type: "delete"
    })))));
  };

  var ImageSettingTip = /*#__PURE__*/_react["default"].createElement("div", {
    className: "ImageSettingTip",
    style: {
      width: 600
    }
  }, /*#__PURE__*/_react["default"].createElement("p", null, "The sorting order of pictures corresponds to the following figure"), /*#__PURE__*/_react["default"].createElement("div", {
    className: "ImageWrap"
  }, /*#__PURE__*/_react["default"].createElement("div", {
    className: "Image1"
  }, "1"), /*#__PURE__*/_react["default"].createElement("div", {
    className: "ImageWrap2"
  }, /*#__PURE__*/_react["default"].createElement("div", {
    className: "Image2"
  }, "2"), /*#__PURE__*/_react["default"].createElement("div", {
    className: "ImageWrap3"
  }, /*#__PURE__*/_react["default"].createElement("div", {
    className: "Image3"
  }, "3"), /*#__PURE__*/_react["default"].createElement("div", {
    className: "Image4"
  }, "4")))), /*#__PURE__*/_react["default"].createElement("p", null, "Zone 1: Recommend to upload a image by 1200px x 50px - 2500px.Each image can be up to 2M."), /*#__PURE__*/_react["default"].createElement("p", null, "Zone 2: Recommend to upload a image by 1200px x 50px - 2500px.Each image can be up to 2M."), /*#__PURE__*/_react["default"].createElement("p", null, "Zone 3: Recommend to upload a image by 1200px x 50px - 2500px.Each image can be up to 2M."), /*#__PURE__*/_react["default"].createElement("p", null, "Zone 4: Recommend to upload a image by 1200px x 50px - 2500px.Each image can be up to 2M."));

  var ImagePresaleTip = /*#__PURE__*/_react["default"].createElement("div", {
    className: "ImagePresaleTip",
    style: {
      width: 600
    }
  }, /*#__PURE__*/_react["default"].createElement("p", null, "The sorting order of pictures corresponds to the following figure"), /*#__PURE__*/_react["default"].createElement("div", {
    className: "ImageWrap"
  }, /*#__PURE__*/_react["default"].createElement("div", {
    className: "Image1"
  }, "1"), /*#__PURE__*/_react["default"].createElement("div", {
    className: "Image1"
  }, "2"), /*#__PURE__*/_react["default"].createElement("div", {
    className: "Image1"
  }, "3")), /*#__PURE__*/_react["default"].createElement("div", {
    className: "ImageWrap1"
  }, /*#__PURE__*/_react["default"].createElement("div", {
    className: "Image1"
  }, "4"), /*#__PURE__*/_react["default"].createElement("div", {
    className: "Image1"
  }, "5")), /*#__PURE__*/_react["default"].createElement("p", null, "Zone 1: Recommend to upload a image by 1200px x 50px - 2500px.Each image can be up to 2M."), /*#__PURE__*/_react["default"].createElement("p", null, "Zone 2: Recommend to upload a image by 1200px x 50px - 2500px.Each image can be up to 2M."), /*#__PURE__*/_react["default"].createElement("p", null, "Zone 3: Recommend to upload a image by 1200px x 50px - 2500px.Each image can be up to 2M."), /*#__PURE__*/_react["default"].createElement("p", null, "Zone 4: Recommend to upload a image by 1200px x 50px - 2500px.Each image can be up to 2M."), /*#__PURE__*/_react["default"].createElement("p", null, "Zone 5: Recommend to upload a image by 1200px x 50px - 2500px.Each image can be up to 2M."));

  return /*#__PURE__*/_react["default"].createElement("div", {
    className: "addImgLink"
  }, /*#__PURE__*/_react["default"].createElement(_fdx.Row, {
    className: "imgTitle",
    type: "flex",
    justify: "space-between"
  }, /*#__PURE__*/_react["default"].createElement("div", null, title || 'Image Setting', hasTip && /*#__PURE__*/_react["default"].createElement(_fdx.Popover, {
    content: ImageSettingTip,
    trigger: "hover",
    placement: "bottomRight"
  }, /*#__PURE__*/_react["default"].createElement(_fdx.Icon, {
    style: {
      marginLeft: 4
    },
    type: "info-circle"
  })), hasPresaleTip && /*#__PURE__*/_react["default"].createElement(_fdx.Popover, {
    content: ImagePresaleTip,
    trigger: "hover",
    placement: "bottomRight"
  }, /*#__PURE__*/_react["default"].createElement(_fdx.Icon, {
    style: {
      marginLeft: 4
    },
    type: "info-circle"
  }))), /*#__PURE__*/_react["default"].createElement("div", null, imgList.length, "/", maxCount)), /*#__PURE__*/_react["default"].createElement("div", {
    className: "imgCot"
  }, imgList.map(function (item, index) {
    return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, {
      key: index
    }, imgItem(item, index));
  })), /*#__PURE__*/_react["default"].createElement("div", {
    className: "addBut"
  }, imgList.length < maxCount && /*#__PURE__*/_react["default"].createElement(_fdx.Button, {
    style: {
      width: '100%'
    },
    onClick: function onClick() {
      addNewItem();
    }
  }, /*#__PURE__*/_react["default"].createElement(_fdx.Icon, {
    type: "plus"
  }), " ", addInfo || 'Add Image')), /*#__PURE__*/_react["default"].createElement(_index["default"], {
    renderer: renderer,
    visible: visible,
    handleModalSave: handleModalSave,
    closeModal: closeModal
  }));
};

var _default = AddImgLink;
exports["default"] = _default;