import { _ as __assign } from '../tslib.es6-20a2a300.js';
import { jsxs, jsx } from 'react/jsx-runtime';
import TableSortLabelIcon from './TableSortLabelIcon.js';
import { m as makeStyles } from '../makeStyles-c9a99c7a.js';
import { a as createStyles } from '../createStyles-16423e9e.js';
import { d as _objectWithoutProperties, b as _extends, P as PropTypes } from '../defaultTheme-49a26576.js';
import * as React from 'react';
import { c as clsx } from '../clsx.m-6243b874.js';
import { c as createSvgIcon } from '../createSvgIcon-6fb7d1b7.js';
import { a as withStyles } from '../withStyles-99aeb25b.js';
import { c as capitalize } from '../capitalize-5d3e9aac.js';
import { B as ButtonBase } from '../ButtonBase-11d3cdb5.js';
import './Icon.js';
import '../icons/ArrowRight.js';
import '../icons/ArrowRightCircle.js';
import '../icons/Check.js';
import '../icons/CheckCircle.js';
import '../icons/ChevronRight.js';
import '../icons/CrossCircle.js';
import '../icons/DollarSign.js';
import '../icons/InfoCircle.js';
import '../icons/Link.js';
import '../icons/TriangleUp.js';
import '../icons/TriangleDown.js';
import '../icons/TriangleLeft.js';
import '../icons/Copy.js';
import '../icons/SortUp.js';
import '../icons/Cross.js';
import '../icons/Search.js';
import '../icons/Range.js';
import '../theme/colors.js';
import '../Box-581dc061.js';
import '../styled-339d0187.js';
import '../hoist-non-react-statics.cjs-b718ab87.js';
import 'react-dom';
import '../useForkRef-4ff8cc89.js';
import '../useEventCallback-8817ed1c.js';
import '../deprecatedPropType-0232df1e.js';
import '../useIsFocusVisible-c048447c.js';
import '../TransitionGroupContext-2ba64e99.js';
import '../refType-5cc24a92.js';
import '../elementTypeAcceptingRef-7677eeee.js';

/**
 * @ignore - internal component.
 */

var ArrowDownwardIcon = createSvgIcon( /*#__PURE__*/React.createElement("path", {
  d: "M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
}), 'ArrowDownward');

var styles = function styles(theme) {
  return {
    /* Styles applied to the root element. */
    root: {
      cursor: 'pointer',
      display: 'inline-flex',
      justifyContent: 'flex-start',
      flexDirection: 'inherit',
      alignItems: 'center',
      '&:focus': {
        color: theme.palette.text.secondary
      },
      '&:hover': {
        color: theme.palette.text.secondary,
        '& $icon': {
          opacity: 0.5
        }
      },
      '&$active': {
        color: theme.palette.text.primary,
        // && instead of & is a workaround for https://github.com/cssinjs/jss/issues/1045
        '&& $icon': {
          opacity: 1,
          color: theme.palette.text.secondary
        }
      }
    },

    /* Pseudo-class applied to the root element if `active={true}`. */
    active: {},

    /* Styles applied to the icon component. */
    icon: {
      fontSize: 18,
      marginRight: 4,
      marginLeft: 4,
      opacity: 0,
      transition: theme.transitions.create(['opacity', 'transform'], {
        duration: theme.transitions.duration.shorter
      }),
      userSelect: 'none'
    },

    /* Styles applied to the icon component if `direction="desc"`. */
    iconDirectionDesc: {
      transform: 'rotate(0deg)'
    },

    /* Styles applied to the icon component if `direction="asc"`. */
    iconDirectionAsc: {
      transform: 'rotate(180deg)'
    }
  };
};
/**
 * A button based label for placing inside `TableCell` for column sorting.
 */

var TableSortLabel$1 = /*#__PURE__*/React.forwardRef(function TableSortLabel(props, ref) {
  var _props$active = props.active,
      active = _props$active === void 0 ? false : _props$active,
      children = props.children,
      classes = props.classes,
      className = props.className,
      _props$direction = props.direction,
      direction = _props$direction === void 0 ? 'asc' : _props$direction,
      _props$hideSortIcon = props.hideSortIcon,
      hideSortIcon = _props$hideSortIcon === void 0 ? false : _props$hideSortIcon,
      _props$IconComponent = props.IconComponent,
      IconComponent = _props$IconComponent === void 0 ? ArrowDownwardIcon : _props$IconComponent,
      other = _objectWithoutProperties(props, ["active", "children", "classes", "className", "direction", "hideSortIcon", "IconComponent"]);

  return /*#__PURE__*/React.createElement(ButtonBase, _extends({
    className: clsx(classes.root, className, active && classes.active),
    component: "span",
    disableRipple: true,
    ref: ref
  }, other), children, hideSortIcon && !active ? null : /*#__PURE__*/React.createElement(IconComponent, {
    className: clsx(classes.icon, classes["iconDirection".concat(capitalize(direction))])
  }));
});
process.env.NODE_ENV !== "production" ? TableSortLabel$1.propTypes = {
  /**
   * If `true`, the label will have the active styling (should be true for the sorted column).
   */
  active: PropTypes.bool,

  /**
   * Label contents, the arrow will be appended automatically.
   */
  children: PropTypes.node,

  /**
   * Override or extend the styles applied to the component.
   * See [CSS API](#css) below for more details.
   */
  classes: PropTypes.object.isRequired,

  /**
   * @ignore
   */
  className: PropTypes.string,

  /**
   * The current sort direction.
   */
  direction: PropTypes.oneOf(['asc', 'desc']),

  /**
   * Hide sort icon when active is false.
   */
  hideSortIcon: PropTypes.bool,

  /**
   * Sort icon to use.
   */
  IconComponent: PropTypes.elementType
} : void 0;
var MuiTableSortLabel = withStyles(styles, {
  name: 'MuiTableSortLabel'
})(TableSortLabel$1);

var useStyles = makeStyles(function (theme) {
    return createStyles({
        root: {
            flexDirection: "row",
            "& .TableSortLabelIcon": {
                marginLeft: theme.spacing(0.5)
            }
        },
        visuallyHidden: {
            border: 0,
            clip: "rect(0 0 0 0)",
            height: 1,
            margin: -1,
            overflow: "hidden",
            padding: 0,
            position: "absolute",
            top: 20,
            width: 1
        }
    });
});
var TableSortLabel = function (_a) {
    var active = _a.active, direction = _a.direction, onClick = _a.onClick, children = _a.children;
    var classes = useStyles();
    return (jsxs(MuiTableSortLabel, __assign({ active: active, direction: direction, onClick: onClick, IconComponent: function () { return jsx(TableSortLabelIcon, { active: active, order: direction }, void 0); }, className: classes.root }, { children: [children, active ? (jsx("span", __assign({ className: classes.visuallyHidden }, { children: direction === "desc" ? "sorted descending" : "sorted ascending" }), void 0)) : null] }), void 0));
};

export { TableSortLabel as default };
