import _defineProperty from '@babel/runtime/helpers/defineProperty';
import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
import 'core-js/modules/es.array.concat.js';
import 'core-js/modules/es.array.map.js';
import 'core-js/modules/es.function.name.js';
import React__default, { useRef } from 'react';
import { Select, SelectItem } from '@carbon/react';
import PropTypes from 'prop-types';
import { useDrop, useDrag } from 'react-dnd';
import classnames from 'classnames';
import { settings } from '../../../constants/Settings.js';
import Button from '../../Button/Button.js';
import { Draggable, Add, Subtract } from '@carbon/icons-react';

var iotPrefix = settings.iotPrefix;
var propTypes = {
  columnId: PropTypes.string.isRequired,
  defaultColumnId: PropTypes.string.isRequired,
  defaultDirectionId: PropTypes.string.isRequired,
  i18n: PropTypes.shape({
    multiSortSelectColumnSortByTitle: PropTypes.stirng,
    multiSortSelectColumnThenByTitle: PropTypes.string,
    multiSortDragHandle: PropTypes.string,
    multiSortSelectColumnLabel: PropTypes.string,
    multiSortDirectionLabel: PropTypes.string,
    multiSortDirectionTitle: PropTypes.string,
    multiSortAddColumn: PropTypes.string,
    multiSortRemoveColumn: PropTypes.string
  }).isRequired,
  index: PropTypes.number.isRequired,
  multiSortColumns: PropTypes.arrayOf(PropTypes.shape({
    id: PropTypes.string,
    name: PropTypes.string,
    disabled: PropTypes.bool
  })).isRequired,
  numSelectedColumns: PropTypes.number.isRequired,
  onAddMultiSortColumn: PropTypes.func.isRequired,
  onMoveRow: PropTypes.func.isRequired,
  onRemoveMultiSortColumn: PropTypes.func.isRequired,
  onSelectMultiSortColumn: PropTypes.func.isRequired,
  onSelectMultiSortColumnDirection: PropTypes.func.isRequired,
  sortDirections: PropTypes.arrayOf(PropTypes.shape({
    id: PropTypes.string,
    label: PropTypes.string
  })).isRequired,
  testId: PropTypes.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 = useRef(null);
  var previewRef = useRef(null);
  var _useDrop = 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(_useDrop, 2),
    handlerId = _useDrop2[0].handlerId,
    drop = _useDrop2[1];
  var _useDrag = useDrag({
      type: 'TableMultiSortRow',
      item: function item() {
        return {
          columnId: columnId,
          index: index
        };
      },
      collect: function collect(monitor) {
        return {
          isDragging: monitor.isDragging()
        };
      }
    }),
    _useDrag2 = _slicedToArray(_useDrag, 3),
    isDragging = _useDrag2[0].isDragging,
    drag = _useDrag2[1],
    preview = _useDrag2[2];
  drag(dragRef);
  drop(preview(previewRef));
  return /*#__PURE__*/React__default.createElement("div", {
    ref: previewRef,
    className: classnames("".concat(iotPrefix, "--table-multi-sort-row"), _defineProperty({}, "".concat(iotPrefix, "--table-multi-sort-row--dragging"), isDragging)),
    "data-handler-id": handlerId,
    style: {
      opacity: isDragging ? 0 : 1
    }
  }, /*#__PURE__*/React__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.createElement(Draggable, null)), /*#__PURE__*/React__default.createElement(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.createElement(SelectItem, {
      key: "".concat(col.id, "-").concat(col.name),
      text: col.name,
      value: col.id,
      disabled: col.disabled
    });
  })), /*#__PURE__*/React__default.createElement(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.createElement(SelectItem, {
      key: "".concat(dir.id, "-").concat(dir.label),
      text: dir.label,
      value: dir.id
    });
  })), /*#__PURE__*/React__default.createElement(Button, {
    hasIconOnly: true,
    renderIcon: Add,
    kind: "ghost",
    tooltipPosition: "top",
    iconDescription: i18n.multiSortAddColumn,
    onClick: onAddMultiSortColumn,
    testId: "".concat(columnId, "-add-sort-button"),
    disabled: numSelectedColumns >= multiSortColumns.length
  }), /*#__PURE__*/React__default.createElement(Button, {
    hasIconOnly: true,
    renderIcon: 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
    }
  }
};

export { TableMultiSortRow };
