"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = _interopRequireDefault(require("react"));
var _styledComponents = _interopRequireDefault(require("styled-components"));
var _color = _interopRequireDefault(require("color"));
var _constants = require("../constants");
var _utils = require("../utils");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var Handle = (0, _styledComponents.default)('div').withConfig({
  displayName: "SliderKnob__Handle",
  componentId: "sc-14d782k-0"
})(["box-sizing:border-box;position:absolute;width:", ";height:", ";top:50%;border-radius:50%;transform:translateY(-50%);background:", ";cursor:", ";border-width:", "px;border-style:solid;border-color:", ";", ";", ";transition:transform 0.16s ease-out;z-index:", ";&:active{background:", ";transform:", ";}&:hover{border:", ";background:", ";}"], function (p) {
  return "".concat((0, _utils.getKnobSize)(p.$variant), "px");
}, function (p) {
  return "".concat((0, _utils.getKnobSize)(p.$variant), "px");
}, function (p) {
  var getKnobColor = function getKnobColor() {
    if (p.$disabled) {
      return p.theme.color.sliderDisabled;
    }
    if (p.$sliderColor) {
      return p.$sliderColor(p.theme);
    }
    return p.theme.colorTokens.action.background_default;
  };
  return p.$variant === _constants.VARIANT_TYPES.PLAYER ? 'transparent' : "".concat(getKnobColor());
}, function (p) {
  return p.$disabled ? 'not-allowed' : 'pointer';
}, function (p) {
  return p.theme.spacing.unit(1);
}, function (p) {
  return p.$sliderColor ? p.$sliderColor(p.theme) : p.theme.colorTokens.action.background_default;
}, function (p) {
  return p.$disabled ? "border-color: ".concat(p.theme.color.sliderDisabled, ";") : '';
}, function (p) {
  return p.$variant === _constants.VARIANT_TYPES.PLAYER ? 'border-color: transparent' : '';
}, function (p) {
  return p.$zIndex;
}, function (p) {
  var knobColor = p.$sliderColor ? (0, _color.default)(p.$sliderColor(p.theme)).darken(0.1) : p.theme.colorTokens.action.background_hover;
  return !p.$disabled ? "".concat(knobColor, "  ") : '';
}, function (p) {
  return p.$variant === _constants.VARIANT_TYPES.PLAYER || p.$disabled ? 'translateY(-50%)' : 'translateY(-50%) scale3d(0.85, 0.85, 0.85)';
}, function (p) {
  var knobColor = p.$sliderColor ? (0, _color.default)(p.$sliderColor(p.theme)).darken(0.1) : p.theme.colorTokens.action.background_hover;
  return !p.$disabled && "".concat(knobColor ? "".concat(p.theme.spacing.unit(1), "px solid ").concat(knobColor) : '');
}, function (p) {
  var knobColor = p.$sliderColor ? (0, _color.default)(p.$sliderColor(p.theme)).darken(0.1) : p.theme.colorTokens.action.background_hover;
  return !p.$disabled ? "".concat(knobColor, "  ") : '';
});
var SliderKnob = _react.default.forwardRef(function (_ref, ref) {
  var disabled = _ref.disabled,
    max = _ref.max,
    min = _ref.min,
    onClick = _ref.onClick,
    onKeyDown = _ref.onKeyDown,
    onMouseDown = _ref.onMouseDown,
    onMouseUp = _ref.onMouseUp,
    onTouchStart = _ref.onTouchStart,
    sliderColor = _ref.sliderColor,
    style = _ref.style,
    value = _ref.value,
    variant = _ref.variant,
    zIndex = _ref.zIndex;
  return _react.default.createElement(Handle, {
    $disabled: disabled,
    $sliderColor: sliderColor,
    $variant: variant,
    "aria-orientation": "horizontal",
    "aria-valuemax": max,
    "aria-valuemin": min,
    "aria-valuenow": value,
    onClick: onClick,
    onKeyDown: onKeyDown,
    onMouseDown: onMouseDown,
    onMouseUp: onMouseUp,
    onTouchStart: onTouchStart,
    ref: ref,
    tabIndex: 0,
    role: "slider",
    style: style,
    $zIndex: zIndex
  });
});
var _default = exports.default = SliderKnob;