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 _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 _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 _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; }
import React, { useMemo } from "react";
import { EyeInvisibleOutlined, EyeOutlined } from "@ant-design/icons";
import { Divider, Popover, Select, Segmented, Space, Form } from "antd";
import PopoverContent from "../ColumnsSetting/PopoverContent";
import { useSharedState } from "../../../../../hooks";
import { Context } from "../../../model";
import ButtonIcon from "../ButtonIcon";
import "./index.less";
var prefix = "pisell-lowcode-";
var LabelShow = function LabelShow(props) {
  var value = props.value,
    onChange = props.onChange;
  return /*#__PURE__*/React.createElement(React.Fragment, null, value ? /*#__PURE__*/React.createElement(EyeOutlined, {
    onClick: function onClick() {
      return onChange === null || onChange === void 0 ? void 0 : onChange(false);
    }
  }) : /*#__PURE__*/React.createElement(EyeInvisibleOutlined, {
    onClick: function onClick() {
      return onChange === null || onChange === void 0 ? void 0 : onChange(true);
    }
  }));
};
var GallerySetting = function GallerySetting(props) {
  var setting = props.setting;
  var _useSharedState = useSharedState(Context),
    state = _useSharedState.state;
  var defaultColumns = state.defaultColumns;
  var cover = setting.cover;
  var fields = cover.fields,
    show = cover.show;
  var form = Form.useFormInstance();
  var column_setting = Form.useWatch("column_setting", {
    form: form,
    preserve: true
  }) || [];
  var isActive = useMemo(function () {
    return column_setting.some(function (item) {
      return !item.isShow;
    });
  }, [column_setting]);
  var coverFieldOptions = useMemo(function () {
    return [{
      value: "noCover",
      label: "无封面"
    }].concat(_toConsumableArray((fields || []).map(function (field) {
      var column = defaultColumns.find(function (col) {
        return col.key === field;
      });
      return {
        value: "".concat(column.dataIndex),
        label: column.title
      };
    }).filter(Boolean)));
  }, [defaultColumns, fields]);
  var headerContent = useMemo(function () {
    return /*#__PURE__*/React.createElement("div", {
      className: "".concat(prefix, "gallery-setting-header")
    }, /*#__PURE__*/React.createElement(Space, {
      direction: "vertical",
      style: {
        width: "100%"
      }
    }, show && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
      className: "".concat(prefix, "gallery-setting-header-item")
    }, /*#__PURE__*/React.createElement("div", null, "\u5C01\u9762\u5185\u5BB9"), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Form.Item, {
      name: ["gallery_setting", "coverField"],
      noStyle: true
    }, /*#__PURE__*/React.createElement(Select, {
      options: coverFieldOptions,
      style: {
        width: 120
      }
    })))), /*#__PURE__*/React.createElement(Form.Item, {
      noStyle: true,
      shouldUpdate: function shouldUpdate(prevValues, currentValues) {
        var _prevValues$gallery_s, _currentValues$galler;
        return ((_prevValues$gallery_s = prevValues.gallery_setting) === null || _prevValues$gallery_s === void 0 ? void 0 : _prevValues$gallery_s.coverField) !== ((_currentValues$galler = currentValues.gallery_setting) === null || _currentValues$galler === void 0 ? void 0 : _currentValues$galler.coverField);
      }
    }, function (_ref) {
      var getFieldValue = _ref.getFieldValue;
      return getFieldValue(["gallery_setting", "coverField"]) !== "noCover" ? /*#__PURE__*/React.createElement("div", {
        className: "".concat(prefix, "gallery-setting-header-item")
      }, /*#__PURE__*/React.createElement("div", null, "\u5C01\u9762\u6548\u679C"), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Form.Item, {
        name: ["gallery_setting", "coverObjectFit"],
        noStyle: true
      }, /*#__PURE__*/React.createElement(Segmented, {
        options: [{
          label: "适应",
          value: "fill"
        }, {
          label: "剪裁",
          value: "cover"
        }]
      })))) : null;
    }), /*#__PURE__*/React.createElement(Divider, {
      style: {
        margin: "0"
      }
    })), /*#__PURE__*/React.createElement("div", {
      className: "".concat(prefix, "gallery-setting-header-item")
    }, /*#__PURE__*/React.createElement("div", null, "\u5C55\u793A\u6A21\u5F0F"), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Form.Item, {
      name: ["gallery_setting", "compactMode"],
      noStyle: true
    }, /*#__PURE__*/React.createElement(Segmented, {
      options: [{
        label: "常规",
        value: "default"
      }, {
        label: "紧凑",
        value: "compact"
      }]
    })))), /*#__PURE__*/React.createElement(Form.Item, {
      noStyle: true,
      shouldUpdate: function shouldUpdate(prevValues, currentValues) {
        var _prevValues$gallery_s2, _currentValues$galler2;
        return ((_prevValues$gallery_s2 = prevValues.gallery_setting) === null || _prevValues$gallery_s2 === void 0 ? void 0 : _prevValues$gallery_s2.compactMode) !== ((_currentValues$galler2 = currentValues.gallery_setting) === null || _currentValues$galler2 === void 0 ? void 0 : _currentValues$galler2.compactMode);
      }
    }, function (_ref2) {
      var getFieldValue = _ref2.getFieldValue;
      return getFieldValue(["gallery_setting", "compactMode"]) === "default" ? /*#__PURE__*/React.createElement("div", {
        className: "".concat(prefix, "gallery-setting-header-item")
      }, /*#__PURE__*/React.createElement("div", null, "\u5C55\u793A\u5B57\u6BB5\u540D"), /*#__PURE__*/React.createElement("div", {
        className: "".concat(prefix, "gallery-setting-header-item-icon-wrap")
      }, /*#__PURE__*/React.createElement(Form.Item, {
        name: ["gallery_setting", "isShowLabel"],
        noStyle: true
      }, /*#__PURE__*/React.createElement(LabelShow, null)))) : null;
    })), /*#__PURE__*/React.createElement(Divider, {
      style: {
        margin: "8px 0 0"
      }
    }));
  }, [coverFieldOptions]);
  var content = useMemo(function () {
    return /*#__PURE__*/React.createElement(Form.Item, {
      name: ["column_setting"],
      noStyle: true
    }, /*#__PURE__*/React.createElement(PopoverContent, {
      isShowTitle: false,
      headerContent: headerContent
    }));
  }, [headerContent]);
  return /*#__PURE__*/React.createElement(Popover, {
    content: content,
    arrow: false,
    placement: "bottomRight",
    trigger: "click"
  }, /*#__PURE__*/React.createElement(ButtonIcon, {
    isActive: isActive
  }, /*#__PURE__*/React.createElement(EyeOutlined, {
    style: {
      cursor: "pointer",
      fontSize: 18
    }
  })));
};
export default GallerySetting;