import React from 'react';
import Color from 'color';
import styled from 'styled-components';
import { VARIANT_TYPES } from '../constants';
import { getKnobSize } from '../utils';
var Handle = styled('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;&:active{background:", ";transform:", ";}"], function (p) {
  return "".concat(getKnobSize(p.$variant), "px");
}, function (p) {
  return "".concat(getKnobSize(p.$variant), "px");
}, function (p) {
  return p.$variant === VARIANT_TYPES.PLAYER ? 'transparent' : p.theme.color.sliderKnobBackground;
}, 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.color.sliderColor;
}, function (p) {
  return p.$disabled ? "border-color: ".concat(p.theme.color.sliderDisabled, ";") : '';
}, function (p) {
  return p.$variant === VARIANT_TYPES.PLAYER ? 'border-color: transparent' : '';
}, function (p) {
  var knobColor = p.$sliderColor ? p.$sliderColor(p.theme) : p.theme.color.sliderColor;
  return !p.$disabled && "".concat(knobColor ? Color(knobColor).darken(0.1) : '');
}, function (p) {
  return p.$variant === VARIANT_TYPES.PLAYER ? 'translateY(-50%)' : 'translateY(-50%) scale3d(0.85, 0.85, 0.85)';
});
var SliderKnob = React.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;
  return React.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
  });
});
export default SliderKnob;