'use strict';

var _defineProperty = require('@babel/runtime/helpers/defineProperty');
var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
require('core-js/modules/es.array.concat.js');
require('core-js/modules/es.array.map.js');
require('core-js/modules/es.function.name.js');
var React = require('react');
var react = require('@carbon/react');
var PropTypes = require('prop-types');
var reactDnd = require('react-dnd');
var classnames = require('classnames');
var Settings = require('../../../constants/Settings.js');
var Button = require('../../Button/Button.js');
var iconsReact = require('@carbon/icons-react');

function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }

var _defineProperty__default = /*#__PURE__*/_interopDefault(_defineProperty);
var _slicedToArray__default = /*#__PURE__*/_interopDefault(_slicedToArray);
var React__default = /*#__PURE__*/_interopDefault(React);
var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
var classnames__default = /*#__PURE__*/_interopDefault(classnames);

var iotPrefix = Settings.settings.iotPrefix;
var propTypes = {
  columnId: PropTypes__default.default.string.isRequired,
  defaultColumnId: PropTypes__default.default.string.isRequired,
  defaultDirectionId: PropTypes__default.default.string.isRequired,
  i18n: PropTypes__default.default.shape({
    multiSortSelectColumnSortByTitle: PropTypes__default.default.stirng,
    multiSortSelectColumnThenByTitle: PropTypes__default.default.string,
    multiSortDragHandle: PropTypes__default.default.string,
    multiSortSelectColumnLabel: PropTypes__default.default.string,
    multiSortDirectionLabel: PropTypes__default.default.string,
    multiSortDirectionTitle: PropTypes__default.default.string,
    multiSortAddColumn: PropTypes__default.default.string,
    multiSortRemoveColumn: PropTypes__default.default.string
  }).isRequired,
  index: PropTypes__default.default.number.isRequired,
  multiSortColumns: PropTypes__default.default.arrayOf(PropTypes__default.default.shape({
    id: PropTypes__default.default.string,
    name: PropTypes__default.default.string,
    disabled: PropTypes__default.default.bool
  })).isRequired,
  numSelectedColumns: PropTypes__default.default.number.isRequired,
  onAddMultiSortColumn: PropTypes__default.default.func.isRequired,
  onMoveRow: PropTypes__default.default.func.isRequired,
  onRemoveMultiSortColumn: PropTypes__default.default.func.isRequired,
  onSelectMultiSortColumn: PropTypes__default.default.func.isRequired,
  onSelectMultiSortColumnDirection: PropTypes__default.default.func.isRequired,
  sortDirections: PropTypes__default.default.arrayOf(PropTypes__default.default.shape({
    id: PropTypes__default.default.string,
    label: PropTypes__default.default.string
  })).isRequired,
  testId: PropTypes__default.default.string.isRequired
};
var TableMultiSortRow = function TableMultiSortRow(_ref) {
  var columnId = _ref.columnId,
    defaultColumnId = _ref.defaultColumnId,
    defaultDirectionId = _ref.defaultDirectionId,
    i18n = _ref.i18n,
    index = _ref.index,
    multiSortColumns = _ref.multiSortColumns,
    numSelectedColumns = _ref.numSelectedColumns,
    onAddMultiSortColumn = _ref.onAddMultiSortColumn,
    onMoveRow = _ref.onMoveRow,
    onRemoveMultiSortColumn = _ref.onRemoveMultiSortColumn,
    onSelectMultiSortColumn = _ref.onSelectMultiSortColumn,
    onSelectMultiSortColumnDirection = _ref.onSelectMultiSortColumnDirection,
    sortDirections = _ref.sortDirections,
    testId = _ref.testId;
  var dragRef = React.useRef(null);
  var previewRef = React.useRef(null);
  var _useDrop = reactDnd.useDrop({
      accept: 'TableMultiSortRow',
      collect: function collect(monitor) {
        return {
          handlerId: monitor.getHandlerId()
        };
      },
      hover: function hover(item, monitor) {
        var _previewRef$current;
        if (!previewRef.current) {
          return;
        }
        var dragIndex = item.index;
        var hoverIndex = index;
        // Don't replace items with themselves
        if (dragIndex === hoverIndex) {
          return;
        }
        // Determine rectangle on screen
        var hoverBoundingRect = (_previewRef$current = previewRef.current) === null || _previewRef$current === void 0 ? void 0 : _previewRef$current.getBoundingClientRect();
        // Get vertical middle
        var hoverMiddleY = (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2;
        // Determine mouse position
        var clientOffset = monitor.getClientOffset();
        // Get pixels to the top
        var hoverClientY = clientOffset.y - hoverBoundingRect.top;
        // Only perform the move when the mouse has crossed half of the items height
        // When dragging downwards, only move when the cursor is below 50%
        // When dragging upwards, only move when the cursor is above 50%
        // Dragging downwards
        if (dragIndex < hoverIndex && hoverClientY < hoverMiddleY) {
          return;
        }
        // Dragging upwards
        if (dragIndex > hoverIndex && hoverClientY > hoverMiddleY) {
          return;
        }
        // Time to actually perform the action
        onMoveRow(dragIndex, hoverIndex);

        // Note: we're mutating the monitor item here!
        // Generally it's better to avoid mutations,
        // but it's good here for the sake of performance
        // to avoid expensive index searches.
        item.index = hoverIndex; // eslint-disable-line no-param-reassign
      }
    }),
    _useDrop2 = _slicedToArray__default.default(_useDrop, 2),
    handlerId = _useDrop2[0].handlerId,
    drop = _useDrop2[1];
  var _useDrag = reactDnd.useDrag({
      type: 'TableMultiSortRow',
      item: function item() {
        return {
          columnId: columnId,
          index: index
        };
      },
      collect: function collect(monitor) {
        return {
          isDragging: monitor.isDragging()
        };
      }
    }),
    _useDrag2 = _slicedToArray__default.default(_useDrag, 3),
    isDragging = _useDrag2[0].isDragging,
    drag = _useDrag2[1],
    preview = _useDrag2[2];
  drag(dragRef);
  drop(preview(previewRef));
  return /*#__PURE__*/React__default.default.createElement("div", {
    ref: previewRef,
    className: classnames__default.default("".concat(iotPrefix, "--table-multi-sort-row"), _defineProperty__default.default({}, "".concat(iotPrefix, "--table-multi-sort-row--dragging"), isDragging)),
    "data-handler-id": handlerId,
    style: {
      opacity: isDragging ? 0 : 1
    }
  }, /*#__PURE__*/React__default.default.createElement("div", {
    ref: dragRef,
    className: "".concat(iotPrefix, "--table-multi-sort-row__handle"),
    title: i18n.multiSortDragHandle,
    "data-testid": "drag-handle-".concat(columnId)
  }, /*#__PURE__*/React__default.default.createElement(iconsReact.Draggable, null)), /*#__PURE__*/React__default.default.createElement(react.Select, {
    "data-testid": "".concat(testId, "-column-select"),
    id: "".concat(columnId, "-select-sort-column"),
    helperText: i18n.multiSortSelectColumnLabel,
    onChange: onSelectMultiSortColumn,
    labelText: index === 0 ? i18n.multiSortSelectColumnSortByTitle : i18n.multiSortSelectColumnThenByTitle,
    defaultValue: defaultColumnId
  }, multiSortColumns.map(function (col) {
    return /*#__PURE__*/React__default.default.createElement(react.SelectItem, {
      key: "".concat(col.id, "-").concat(col.name),
      text: col.name,
      value: col.id,
      disabled: col.disabled
    });
  })), /*#__PURE__*/React__default.default.createElement(react.Select, {
    "data-testid": "".concat(testId, "-direction-select"),
    id: "".concat(columnId, "-select-sort-direction"),
    helperText: i18n.multiSortDirectionLabel,
    labelText: i18n.multiSortDirectionTitle,
    defaultValue: defaultDirectionId,
    onChange: onSelectMultiSortColumnDirection
  }, sortDirections.map(function (dir) {
    return /*#__PURE__*/React__default.default.createElement(react.SelectItem, {
      key: "".concat(dir.id, "-").concat(dir.label),
      text: dir.label,
      value: dir.id
    });
  })), /*#__PURE__*/React__default.default.createElement(Button, {
    hasIconOnly: true,
    renderIcon: iconsReact.Add,
    kind: "ghost",
    tooltipPosition: "top",
    iconDescription: i18n.multiSortAddColumn,
    onClick: onAddMultiSortColumn,
    testId: "".concat(columnId, "-add-sort-button"),
    disabled: numSelectedColumns >= multiSortColumns.length
  }), /*#__PURE__*/React__default.default.createElement(Button, {
    hasIconOnly: true,
    renderIcon: iconsReact.Subtract,
    kind: "ghost",
    tooltipPosition: "top",
    iconDescription: i18n.multiSortRemoveColumn,
    onClick: onRemoveMultiSortColumn,
    testId: "".concat(columnId, "-remove-sort-button"),
    disabled: numSelectedColumns === 1
  }));
};
TableMultiSortRow.propTypes = propTypes;
TableMultiSortRow.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "TableMultiSortRow",
  "props": {
    "columnId": {
      "description": "",
      "type": {
        "name": "string"
      },
      "required": true
    },
    "defaultColumnId": {
      "description": "",
      "type": {
        "name": "string"
      },
      "required": true
    },
    "defaultDirectionId": {
      "description": "",
      "type": {
        "name": "string"
      },
      "required": true
    },
    "i18n": {
      "description": "",
      "type": {
        "name": "shape",
        "value": {
          "multiSortSelectColumnSortByTitle": {
            "name": "custom",
            "raw": "PropTypes.stirng",
            "required": false
          },
          "multiSortSelectColumnThenByTitle": {
            "name": "string",
            "required": false
          },
          "multiSortDragHandle": {
            "name": "string",
            "required": false
          },
          "multiSortSelectColumnLabel": {
            "name": "string",
            "required": false
          },
          "multiSortDirectionLabel": {
            "name": "string",
            "required": false
          },
          "multiSortDirectionTitle": {
            "name": "string",
            "required": false
          },
          "multiSortAddColumn": {
            "name": "string",
            "required": false
          },
          "multiSortRemoveColumn": {
            "name": "string",
            "required": false
          }
        }
      },
      "required": true
    },
    "index": {
      "description": "",
      "type": {
        "name": "number"
      },
      "required": true
    },
    "multiSortColumns": {
      "description": "",
      "type": {
        "name": "arrayOf",
        "value": {
          "name": "shape",
          "value": {
            "id": {
              "name": "string",
              "required": false
            },
            "name": {
              "name": "string",
              "required": false
            },
            "disabled": {
              "name": "bool",
              "required": false
            }
          }
        }
      },
      "required": true
    },
    "numSelectedColumns": {
      "description": "",
      "type": {
        "name": "number"
      },
      "required": true
    },
    "onAddMultiSortColumn": {
      "description": "",
      "type": {
        "name": "func"
      },
      "required": true
    },
    "onMoveRow": {
      "description": "",
      "type": {
        "name": "func"
      },
      "required": true
    },
    "onRemoveMultiSortColumn": {
      "description": "",
      "type": {
        "name": "func"
      },
      "required": true
    },
    "onSelectMultiSortColumn": {
      "description": "",
      "type": {
        "name": "func"
      },
      "required": true
    },
    "onSelectMultiSortColumnDirection": {
      "description": "",
      "type": {
        "name": "func"
      },
      "required": true
    },
    "sortDirections": {
      "description": "",
      "type": {
        "name": "arrayOf",
        "value": {
          "name": "shape",
          "value": {
            "id": {
              "name": "string",
              "required": false
            },
            "label": {
              "name": "string",
              "required": false
            }
          }
        }
      },
      "required": true
    },
    "testId": {
      "description": "",
      "type": {
        "name": "string"
      },
      "required": true
    }
  }
};

exports.TableMultiSortRow = TableMultiSortRow;
