import _extends from '@babel/runtime/helpers/extends';
import _defineProperty from '@babel/runtime/helpers/defineProperty';
import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
import 'core-js/modules/es.symbol.js';
import 'core-js/modules/es.symbol.description.js';
import React__default, { useState } from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import Button from '../../Button/Button.js';
import { settings } from '../../../constants/Settings.js';

var _excluded = ["onClick", "testId", "className", "description", "isActive", "tooltipAlignment", "tooltipPosition", "langDir"];
var iotPrefix = settings.iotPrefix,
  prefix = settings.prefix;
var propTypes = {
  onClick: PropTypes.func.isRequired,
  testId: PropTypes.string.isRequired,
  renderIcon: PropTypes.object.isRequired,
  // eslint-disable-line react/forbid-prop-types
  description: PropTypes.node.isRequired,
  /** is the button currently 'toggled' active, used for column filters */
  isActive: PropTypes.bool,
  /** is the button disabled */
  disabled: PropTypes.bool,
  tooltipAlignment: PropTypes.oneOf(['start', 'center', 'end']),
  tooltipPosition: PropTypes.oneOf(['top', 'right', 'bottom', 'left']),
  langDir: PropTypes.oneOf(['ltr', 'rtl'])
};
var defaultProps = {
  isActive: false,
  disabled: false,
  tooltipAlignment: 'center',
  tooltipPosition: 'bottom',
  langDir: 'ltr'
};

/**
 * Toolbar button that renders an icon only button
 */
var TableToolbarSVGButton = function TableToolbarSVGButton(_ref) {
  var onClick = _ref.onClick,
    testId = _ref.testId,
    className = _ref.className,
    description = _ref.description,
    isActive = _ref.isActive,
    tooltipAlignment = _ref.tooltipAlignment,
    tooltipPosition = _ref.tooltipPosition,
    langDir = _ref.langDir,
    rest = _objectWithoutProperties(_ref, _excluded);
  var _useState = useState(tooltipAlignment),
    _useState2 = _slicedToArray(_useState, 2),
    adjustedTooltipAlignment = _useState2[0],
    setAdjustedTooltipAlignment = _useState2[1];
  return /*#__PURE__*/React__default.createElement(Button, _extends({}, rest, {
    ref: function ref(node) {
      /* istanbul ignore else */
      if (node) {
        var tooltip = node.querySelector(".".concat(prefix, "--assistive-text"));
        if (!tooltip) {
          return;
        }
        var childRect = tooltip.getBoundingClientRect();
        var parentRect = node.parentElement.getBoundingClientRect();
        /* istanbul ignore else */
        if (langDir === 'ltr' && childRect.left + childRect.width > parentRect.left + parentRect.width) {
          setAdjustedTooltipAlignment('end');
          return;
        }
        /* istanbul ignore else */
        if (langDir === 'rtl' && childRect.left < parentRect.left) {
          setAdjustedTooltipAlignment('start');
        }
      }
    },
    className: classnames("".concat(prefix, "--btn--icon-only"), "".concat(iotPrefix, "--tooltip-svg-wrapper"), className, _defineProperty({}, "".concat(iotPrefix, "--table-toolbar-button-active"), isActive)),
    kind: "icon-selection",
    onClick: onClick,
    iconDescription: description,
    testId: testId,
    tooltipAlignment: adjustedTooltipAlignment,
    tooltipPosition: tooltipPosition
  }));
};
TableToolbarSVGButton.propTypes = propTypes;
TableToolbarSVGButton.defaultProps = defaultProps;
TableToolbarSVGButton.__docgenInfo = {
  "description": "Toolbar button that renders an icon only button",
  "methods": [],
  "displayName": "TableToolbarSVGButton",
  "props": {
    "isActive": {
      "defaultValue": {
        "value": "false",
        "computed": false
      },
      "description": "is the button currently 'toggled' active, used for column filters",
      "type": {
        "name": "bool"
      },
      "required": false
    },
    "disabled": {
      "defaultValue": {
        "value": "false",
        "computed": false
      },
      "description": "is the button disabled",
      "type": {
        "name": "bool"
      },
      "required": false
    },
    "tooltipAlignment": {
      "defaultValue": {
        "value": "'center'",
        "computed": false
      },
      "description": "",
      "type": {
        "name": "enum",
        "value": [{
          "value": "'start'",
          "computed": false
        }, {
          "value": "'center'",
          "computed": false
        }, {
          "value": "'end'",
          "computed": false
        }]
      },
      "required": false
    },
    "tooltipPosition": {
      "defaultValue": {
        "value": "'bottom'",
        "computed": false
      },
      "description": "",
      "type": {
        "name": "enum",
        "value": [{
          "value": "'top'",
          "computed": false
        }, {
          "value": "'right'",
          "computed": false
        }, {
          "value": "'bottom'",
          "computed": false
        }, {
          "value": "'left'",
          "computed": false
        }]
      },
      "required": false
    },
    "langDir": {
      "defaultValue": {
        "value": "'ltr'",
        "computed": false
      },
      "description": "",
      "type": {
        "name": "enum",
        "value": [{
          "value": "'ltr'",
          "computed": false
        }, {
          "value": "'rtl'",
          "computed": false
        }]
      },
      "required": false
    },
    "onClick": {
      "description": "",
      "type": {
        "name": "func"
      },
      "required": true
    },
    "testId": {
      "description": "",
      "type": {
        "name": "string"
      },
      "required": true
    },
    "renderIcon": {
      "description": "",
      "type": {
        "name": "object"
      },
      "required": true
    },
    "description": {
      "description": "",
      "type": {
        "name": "node"
      },
      "required": true
    }
  }
};
var TableToolbarSVGButton$1 = TableToolbarSVGButton;

export { TableToolbarSVGButton$1 as default };
