import React, { useContext } from 'react';
import classNames from 'classnames';
import { AriaContext } from './context';
import { useTranslation } from '../hooks/use-translation';
import { jsx as _jsx } from "react/jsx-runtime";
const VERTICAL = 'vertical';
export function DefaultHandle({
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  css,
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  styles,
  orientation,
  disabled,
  handleRef,
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  theme,
  ...props
}) {
  const {
    t
  } = useTranslation();
  const {
    testId,
    handleAriaLabel,
    handleAriaValueText,
    ariaLabelledBy
  } = useContext(AriaContext);
  const ariaContext = {
    key: props['data-handle-key'],
    value: props['aria-valuenow'],
    max: props['aria-valuemax'],
    min: props['aria-valuemin'],
    disabled
  };
  const ariaLabel = typeof handleAriaLabel === 'function' ? handleAriaLabel(ariaContext) : undefined;
  const valueText = typeof handleAriaValueText === 'function' ? handleAriaValueText(ariaContext) : undefined;
  const ariaAttrs = {
    ...(ariaLabel && {
      'aria-label': ariaLabel
    }),
    ...(!ariaLabel && ariaLabelledBy && {
      'aria-labelledby': ariaLabelledBy
    }),
    ...(!ariaLabel && !ariaLabelledBy && {
      'aria-label': t('Slider handle')
    })
  };
  return /*#__PURE__*/_jsx("div", {
    ...props,
    ...ariaAttrs,
    ref: handleRef,
    "aria-valuetext": valueText,
    "test-id": testId ? `${testId}-handle-${ariaContext.key}` : undefined,
    className: classNames('DefaultHandle_handle', orientation === VERTICAL ? 'DefaultHandle_handle__vertical' : 'DefaultHandle_handle__horizontal', disabled && 'DefaultHandle_handle__disabled')
  });
}