"use strict";

exports.__esModule = true;
exports.default = exports.CustomList = exports.ScrollableCustomList = void 0;

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

var _reactIntl = require("react-intl");

var _styles = require("@material-ui/core/styles");

var _Grid = _interopRequireDefault(require("@material-ui/core/Grid"));

var _List = _interopRequireDefault(require("@material-ui/core/List"));

var _ListItem = _interopRequireDefault(require("@material-ui/core/ListItem"));

var _ListItemText = _interopRequireDefault(require("@material-ui/core/ListItemText"));

var _Button = _interopRequireDefault(require("@material-ui/core/Button"));

var _Paper = _interopRequireDefault(require("@material-ui/core/Paper"));

var _Typography = _interopRequireDefault(require("@material-ui/core/Typography"));

var _classnames = _interopRequireDefault(require("classnames"));

var _propertyValidator = require("../../../utils/propertyValidator");

var _sharedMessages = _interopRequireDefault(require("../../../sharedMessages"));

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 () {
  var enterModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.enterModule : undefined;
  enterModule && enterModule(module);
})();

(function () {
  var enterModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.enterModule : undefined;
  enterModule && enterModule(module);
})();

function _extends() { _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; }; return _extends.apply(this, arguments); }

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

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

var __signature__ = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default.signature : function (a) {
  return a;
};

var __signature__ = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default.signature : function (a) {
  return a;
};

var useStyles = (0, _styles.makeStyles)(function (theme) {
  return {
    title: {
      color: theme.palette.text.hint,
      fontSize: theme.spacing(1.2),
      marginBottom: theme.spacing(0.6)
    },
    paper: {
      overflow: "auto",
      height: function height(props) {
        return theme.spacing(props.height);
      },
      border: "1px solid ".concat(theme.palette.primary.light),
      borderRadius: theme.shape.borderRadius,
      boxShadow: "none",
      "&::-webkit-scrollbar": {
        width: theme.spacing(1.5)
      },
      "&::-webkit-scrollbar-thumb": {
        background: theme.palette.grey.borders,
        border: "5px white solid",
        backgroundClip: "padding-box",
        borderRadius: theme.spacing(1.5)
      }
    },
    paperLeft: {
      border: "1px solid ".concat(theme.palette.grey.borders)
    },
    customContainer: {
      margin: theme.spacing(1.5, 1)
    },
    button: {
      margin: theme.spacing(0.5, 1),
      fontSize: theme.spacing(1.3),
      lineHeight: theme.spacing(1.4),
      padding: theme.spacing(0.7),
      minWidth: theme.spacing(8)
    }
  };
});
var useListStyles = (0, _styles.makeStyles)(function (theme) {
  return {
    item: {
      fontSize: theme.spacing(1.3),
      color: theme.palette.text.primary,
      fontFamily: theme.typography.fontFamily,
      padding: theme.spacing(0.4, 1.6),
      cursor: "pointer"
    },
    selectedItem: {
      backgroundColor: theme.palette.primary.light
    },
    itemTitle: {
      fontWeight: theme.typography.fontWeightSemiBold,
      marginBottom: theme.spacing(0.4)
    }
  };
});

var formatState = function formatState(state, checked, from, to) {
  var _ref3;

  var fromSelectedItems = state[from].filter(function (_ref) {
    var id = _ref.id;
    return checked.includes(id);
  });
  return _ref3 = {}, _defineProperty(_ref3, to, [].concat(state[to], fromSelectedItems)), _defineProperty(_ref3, from, state[from].filter(function (_ref2) {
    var id = _ref2.id;
    return !checked.includes(id);
  })), _ref3;
};

var ScrollableCustomList = _react.default.forwardRef(function (props, ref) {
  var scrollEvent = function scrollEvent(evt) {
    if (!props.onScroll) return;

    if (evt.target.scrollHeight - (evt.target.scrollTop + evt.target.offsetHeight) < 50 && props.currentTotal === props.currentPage * props.pageSize) {
      props.onScroll(props.currentPage + 1);
    }
  };

  return /*#__PURE__*/_react.default.createElement(_Paper.default, {
    ref: ref,
    onScroll: scrollEvent,
    className: (0, _classnames.default)(props.classes.paper, props.classes.paperLeft)
  }, /*#__PURE__*/_react.default.createElement(CustomList, {
    items: props.items,
    checked: props.checked,
    setChecked: props.setChecked,
    listItemFormatter: props.listItemFormatter,
    multiSelect: props.multiSelect,
    onChange: props.onChange
  }));
});

exports.ScrollableCustomList = ScrollableCustomList;

var compareListItem = function compareListItem(prev, next) {
  return prev.item.id === next.item.id && prev.isChecked === next.isChecked && prev.item.subtitle === next.item.subtitle && prev.item.title === next.item.title;
};

var ListItemWrapper = function ListItemWrapper(_ref4) {
  var isChecked = _ref4.isChecked,
      item = _ref4.item,
      handleToggle = _ref4.handleToggle,
      listItemFormatter = _ref4.listItemFormatter,
      classes = _ref4.classes;
  return /*#__PURE__*/_react.default.createElement(_ListItem.default, {
    className: (0, _classnames.default)(classes.item, isChecked && classes.selectedItem),
    role: "listitem",
    onClick: !item.disabled ? function () {
      return handleToggle(item.id);
    } : null,
    disabled: item.disabled
  }, listItemFormatter ? listItemFormatter(item) : /*#__PURE__*/_react.default.createElement(_ListItemText.default, {
    key: "transfer-list-item-".concat(item.id, "-label"),
    primary: /*#__PURE__*/_react.default.createElement(_Typography.default, {
      component: "div",
      className: classes.itemTitle
    }, item.title),
    secondary: /*#__PURE__*/_react.default.createElement(_Typography.default, {
      component: "div"
    }, item.subtitle)
  }));
};

var MemoListItem = _react.default.memo(ListItemWrapper, compareListItem);

var CustomList = function CustomList(_ref5) {
  var items = _ref5.items,
      checked = _ref5.checked,
      setChecked = _ref5.setChecked,
      listItemFormatter = _ref5.listItemFormatter,
      _ref5$multiSelect = _ref5.multiSelect,
      multiSelect = _ref5$multiSelect === void 0 ? true : _ref5$multiSelect,
      onChange = _ref5.onChange;
  var classes = useListStyles();
  var handleToggle = (0, _react.useCallback)(function (value) {
    return setChecked(function (state) {
      var currentIndex = state.indexOf(value);
      var newChecked = [].concat(state);

      if (!multiSelect) {
        newChecked = [value];
      } else {
        if (currentIndex === -1) {
          newChecked.push(value);
        } else {
          newChecked.splice(currentIndex, 1);
        }
      }

      return newChecked;
    });
  }, [setChecked, multiSelect]);
  (0, _react.useEffect)(function () {
    return onChange && onChange(checked);
  }, [checked, onChange]);
  return /*#__PURE__*/_react.default.createElement(_List.default, {
    component: "div",
    role: "list"
  }, items.map(function (item) {
    return /*#__PURE__*/_react.default.createElement(MemoListItem, {
      key: item.id,
      isChecked: checked.includes(item.id),
      item: item,
      listItemFormatter: listItemFormatter,
      classes: classes,
      handleToggle: handleToggle
    });
  }));
};

exports.CustomList = CustomList;

__signature__(CustomList, "useListStyles{classes}\nuseCallback{handleToggle}\nuseEffect{}", function () {
  return [useListStyles];
});

__signature__(CustomList, "useListStyles{classes}\nuseCallback{handleToggle}\nuseEffect{}", function () {
  return [useListStyles];
});

var TransferList = function TransferList(_ref6) {
  var _rightListData$data2, _leftListData$data2;

  var rightListData = _ref6.rightListData,
      leftListData = _ref6.leftListData,
      onChange = _ref6.onChange,
      addButtonTitle = _ref6.addButtonTitle,
      removeButtonTitle = _ref6.removeButtonTitle,
      customLeftComponent = _ref6.customLeftComponent,
      listItemFormatter = _ref6.listItemFormatter,
      onScroll = _ref6.onScroll,
      currentTotal = _ref6.currentTotal,
      _ref6$currentPage = _ref6.currentPage,
      currentPage = _ref6$currentPage === void 0 ? 1 : _ref6$currentPage,
      _ref6$pageSize = _ref6.pageSize,
      pageSize = _ref6$pageSize === void 0 ? 20 : _ref6$pageSize,
      _ref6$height = _ref6.height,
      height = _ref6$height === void 0 ? 48 : _ref6$height;
  var classes = useStyles({
    height: height
  });

  var _useState = (0, _react.useState)([]),
      _useState2 = _slicedToArray(_useState, 2),
      checked = _useState2[0],
      setChecked = _useState2[1];

  var refScrollableList = _react.default.useRef();

  var onAddButtonClick = function onAddButtonClick() {
    onChange(formatState({
      right: rightListData.data,
      left: leftListData.data
    }, checked, "left", "right"));
    setChecked(checked.filter(function (check) {
      var _leftListData$data;

      return !((_leftListData$data = leftListData.data) != null && _leftListData$data.some(function (_ref7) {
        var id = _ref7.id;
        return id === check;
      }));
    }));
  };

  var onRemoveButtonClick = function onRemoveButtonClick() {
    onChange(formatState({
      right: rightListData.data,
      left: leftListData.data
    }, checked, "right", "left"));
    setChecked(checked.filter(function (check) {
      var _rightListData$data;

      return !((_rightListData$data = rightListData.data) != null && _rightListData$data.some(function (_ref8) {
        var id = _ref8.id;
        return id === check;
      }));
    }));
  };

  var rightSelected = (_rightListData$data2 = rightListData.data) == null ? void 0 : _rightListData$data2.some(function (_ref9) {
    var id = _ref9.id;
    return checked.includes(id);
  });
  var leftSelected = (_leftListData$data2 = leftListData.data) == null ? void 0 : _leftListData$data2.some(function (_ref10) {
    var id = _ref10.id;
    return checked.includes(id);
  });
  return /*#__PURE__*/_react.default.createElement(_Grid.default, {
    container: true,
    spacing: 2,
    justifyContent: "center",
    alignItems: "center"
  }, /*#__PURE__*/_react.default.createElement(_Grid.default, {
    item: true,
    xs: 5
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: classes.title
  }, leftListData.title), (0, _propertyValidator.isReactComponent)(customLeftComponent) ? /*#__PURE__*/_react.default.createElement(_Paper.default, {
    className: (0, _classnames.default)(classes.paper, classes.paperLeft)
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: classes.customContainer
  }, /*#__PURE__*/_react.default.createElement(customLeftComponent.type, _extends({
    selected: checked,
    setSelected: setChecked
  }, customLeftComponent.props)))) : /*#__PURE__*/_react.default.createElement(ScrollableCustomList, {
    ref: refScrollableList,
    onScroll: onScroll,
    currentPage: currentPage,
    currentTotal: currentTotal,
    pageSize: pageSize,
    classes: classes,
    items: leftListData.data,
    checked: checked,
    setChecked: setChecked,
    listItemFormatter: listItemFormatter
  })), /*#__PURE__*/_react.default.createElement(_Grid.default, {
    xs: 2,
    item: true
  }, /*#__PURE__*/_react.default.createElement(_Grid.default, {
    container: true,
    direction: "column",
    alignItems: "center"
  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
    variant: "outlined",
    size: "small",
    className: classes.button,
    onClick: onAddButtonClick,
    disabled: !leftSelected,
    "aria-label": "move selected right"
  }, addButtonTitle || /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, _sharedMessages.default.add), " >"), /*#__PURE__*/_react.default.createElement(_Button.default, {
    variant: "outlined",
    size: "small",
    className: classes.button,
    onClick: onRemoveButtonClick,
    disabled: !rightSelected,
    "aria-label": "move selected left"
  }, "< ", removeButtonTitle || /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, _sharedMessages.default.remove)))), /*#__PURE__*/_react.default.createElement(_Grid.default, {
    item: true,
    xs: 5
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: classes.title
  }, rightListData.title), /*#__PURE__*/_react.default.createElement(_Paper.default, {
    className: classes.paper
  }, /*#__PURE__*/_react.default.createElement(CustomList, {
    items: rightListData.data,
    checked: checked,
    setChecked: setChecked,
    listItemFormatter: listItemFormatter
  }))));
};

__signature__(TransferList, "useStyles{classes}\nuseState{[checked, setChecked]([])}\nuseRef{refScrollableList}", function () {
  return [useStyles];
});

__signature__(TransferList, "useStyles{classes}\nuseState{[checked, setChecked]([])}\nuseRef{refScrollableList}", function () {
  return [useStyles];
});

var _default = TransferList;
var _default2 = _default;
var _default3 = _default2;
exports.default = _default3;
;

(function () {
  var reactHotLoader = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default : undefined;

  if (!reactHotLoader) {
    return;
  }

  reactHotLoader.register(useStyles, "useStyles", "/home/vsts/work/1/s/src/components/MaterialUI/DataDisplay/TransferList.js");
  reactHotLoader.register(useListStyles, "useListStyles", "/home/vsts/work/1/s/src/components/MaterialUI/DataDisplay/TransferList.js");
  reactHotLoader.register(formatState, "formatState", "/home/vsts/work/1/s/src/components/MaterialUI/DataDisplay/TransferList.js");
  reactHotLoader.register(ScrollableCustomList, "ScrollableCustomList", "/home/vsts/work/1/s/src/components/MaterialUI/DataDisplay/TransferList.js");
  reactHotLoader.register(compareListItem, "compareListItem", "/home/vsts/work/1/s/src/components/MaterialUI/DataDisplay/TransferList.js");
  reactHotLoader.register(ListItemWrapper, "ListItemWrapper", "/home/vsts/work/1/s/src/components/MaterialUI/DataDisplay/TransferList.js");
  reactHotLoader.register(MemoListItem, "MemoListItem", "/home/vsts/work/1/s/src/components/MaterialUI/DataDisplay/TransferList.js");
  reactHotLoader.register(CustomList, "CustomList", "/home/vsts/work/1/s/src/components/MaterialUI/DataDisplay/TransferList.js");
  reactHotLoader.register(TransferList, "TransferList", "/home/vsts/work/1/s/src/components/MaterialUI/DataDisplay/TransferList.js");
  reactHotLoader.register(_default, "default", "/home/vsts/work/1/s/src/components/MaterialUI/DataDisplay/TransferList.js");
})();

;

(function () {
  var leaveModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.leaveModule : undefined;
  leaveModule && leaveModule(module);
})();

;

(function () {
  var reactHotLoader = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default : undefined;

  if (!reactHotLoader) {
    return;
  }

  reactHotLoader.register(useStyles, "useStyles", "/home/vsts/work/1/s/src/components/MaterialUI/DataDisplay/TransferList.js");
  reactHotLoader.register(useListStyles, "useListStyles", "/home/vsts/work/1/s/src/components/MaterialUI/DataDisplay/TransferList.js");
  reactHotLoader.register(formatState, "formatState", "/home/vsts/work/1/s/src/components/MaterialUI/DataDisplay/TransferList.js");
  reactHotLoader.register(ScrollableCustomList, "ScrollableCustomList", "/home/vsts/work/1/s/src/components/MaterialUI/DataDisplay/TransferList.js");
  reactHotLoader.register(compareListItem, "compareListItem", "/home/vsts/work/1/s/src/components/MaterialUI/DataDisplay/TransferList.js");
  reactHotLoader.register(ListItemWrapper, "ListItemWrapper", "/home/vsts/work/1/s/src/components/MaterialUI/DataDisplay/TransferList.js");
  reactHotLoader.register(MemoListItem, "MemoListItem", "/home/vsts/work/1/s/src/components/MaterialUI/DataDisplay/TransferList.js");
  reactHotLoader.register(CustomList, "CustomList", "/home/vsts/work/1/s/src/components/MaterialUI/DataDisplay/TransferList.js");
  reactHotLoader.register(TransferList, "TransferList", "/home/vsts/work/1/s/src/components/MaterialUI/DataDisplay/TransferList.js");
  reactHotLoader.register(_default2, "default", "/home/vsts/work/1/s/src/components/MaterialUI/DataDisplay/TransferList.js");
})();

;

(function () {
  var leaveModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.leaveModule : undefined;
  leaveModule && leaveModule(module);
})();