import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _extends from "@babel/runtime/helpers/esm/extends";
import { TinyColor } from '@ctrl/tinycolor';
import { genComponentStyleHook, mergeToken } from '../../theme';
import { resetComponent } from '../../style'; // =============================== Base ===============================

var genBaseStyle = function genBaseStyle(token) {
  var _$concat, _hover, _disabled, _extends2;

  var componentCls = token.componentCls,
      controlSize = token.controlSize,
      dotSize = token.dotSize,
      marginFull = token.marginFull,
      marginPart = token.marginPart,
      colorFillContentHover = token.colorFillContentHover,
      antCls = token.antCls;
  return _defineProperty({}, componentCls, _extends(_extends({}, resetComponent(token)), (_extends2 = {
    position: 'relative',
    height: controlSize,
    margin: "".concat(marginPart, "px ").concat(marginFull, "px"),
    padding: 0,
    cursor: 'pointer',
    touchAction: 'none'
  }, _defineProperty(_extends2, "&-vertical", {
    margin: "".concat(marginFull, "px ").concat(marginPart, "px")
  }), _defineProperty(_extends2, "".concat(componentCls, "-rail"), {
    position: 'absolute',
    backgroundColor: token.colorFillSecondary,
    borderRadius: token.controlRadius,
    transition: "background-color ".concat(token.motionDurationSlow)
  }), _defineProperty(_extends2, "".concat(componentCls, "-track"), {
    position: 'absolute',
    backgroundColor: token.colorPrimaryBorder,
    borderRadius: token.controlRadius,
    transition: "background-color ".concat(token.motionDurationSlow)
  }), _defineProperty(_extends2, "".concat(componentCls, "-handle"), (_$concat = {
    position: 'absolute',
    width: token.handleSize,
    height: token.handleSize,
    backgroundColor: token.colorBgContainer,
    border: "".concat(token.lineHandleWidth, "px solid ").concat(token.colorPrimaryBorder),
    borderRadius: '50%',
    boxShadow: 'none',
    cursor: 'pointer',
    transition: "\n          border-color ".concat(token.motionDurationSlow, ",\n          box-shadow ").concat(token.motionDurationSlow, ",\n          transform ").concat(token.motionDurationSlow, " cubic-bezier(0.18, 0.89, 0.32, 1.28)\n        "),
    outline: 'none'
  }, _defineProperty(_$concat, "".concat(componentCls, "-dragging"), {
    zIndex: 1
  }), _defineProperty(_$concat, '&:focus', {
    borderColor: token.colorPrimaryHover,
    outline: 'none',
    boxShadow: token.handleFocusShadow
  }), _$concat)), _defineProperty(_extends2, '&:hover', (_hover = {}, _defineProperty(_hover, "".concat(componentCls, "-rail"), {
    backgroundColor: colorFillContentHover
  }), _defineProperty(_hover, "".concat(componentCls, "-track"), {
    backgroundColor: token.colorPrimaryBorderHover
  }), _defineProperty(_hover, "".concat(componentCls, "-dot"), {
    borderColor: colorFillContentHover
  }), _defineProperty(_hover, "".concat(componentCls, "-handle").concat(antCls, "-tooltip-open"), {
    borderColor: token.colorPrimary
  }), _defineProperty(_hover, "\n          ".concat(componentCls, "-handle,\n          ").concat(componentCls, "-dot-active\n        "), {
    borderColor: token.colorPrimaryHover
  }), _hover)), _defineProperty(_extends2, "".concat(componentCls, "-mark"), {
    position: 'absolute',
    fontSize: token.fontSize
  }), _defineProperty(_extends2, "".concat(componentCls, "-mark-text"), {
    position: 'absolute',
    display: 'inline-block',
    color: token.colorTextSecondary,
    textAlign: 'center',
    wordBreak: 'keep-all',
    cursor: 'pointer',
    userSelect: 'none',
    '&-active': {
      color: token.colorText
    }
  }), _defineProperty(_extends2, "".concat(componentCls, "-step"), {
    position: 'absolute',
    background: 'transparent',
    pointerEvents: 'none'
  }), _defineProperty(_extends2, "".concat(componentCls, "-dot"), {
    position: 'absolute',
    width: dotSize,
    height: dotSize,
    backgroundColor: token.colorBgContainer,
    border: "".concat(token.lineHandleWidth, "px solid ").concat(token.colorSplit),
    borderRadius: '50%',
    cursor: 'pointer',
    transition: "border-color ".concat(token.motionDurationSlow),
    '&-active': {
      borderColor: token.colorPrimaryBorder
    }
  }), _defineProperty(_extends2, '&-disabled', (_disabled = {
    cursor: 'not-allowed'
  }, _defineProperty(_disabled, "".concat(componentCls, "-rail"), {
    backgroundColor: "".concat(token.colorFillSecondary, " !important")
  }), _defineProperty(_disabled, "".concat(componentCls, "-track"), {
    backgroundColor: "".concat(token.colorTextDisabled, " !important")
  }), _defineProperty(_disabled, "\n          ".concat(componentCls, "-handle,\n          ").concat(componentCls, "-dot\n        "), {
    backgroundColor: token.colorBgContainer,
    borderColor: "".concat(token.colorTextDisabled, " !important"),
    boxShadow: 'none',
    cursor: 'not-allowed'
  }), _defineProperty(_disabled, "\n          ".concat(componentCls, "-mark-text,\n          ").concat(componentCls, "-dot\n        "), {
    cursor: "not-allowed !important"
  }), _disabled)), _extends2)));
}; // ============================ Horizontal ============================


var genDirectionStyle = function genDirectionStyle(token, horizontal) {
  var _$concat2, _$concat5, _$concat6, _ref2;

  var componentCls = token.componentCls,
      railSize = token.railSize,
      controlSize = token.controlSize,
      handleSize = token.handleSize,
      dotSize = token.dotSize;
  var railPadding = horizontal ? 'paddingBlock' : 'paddingInline';
  var full = horizontal ? 'width' : 'height';
  var part = horizontal ? 'height' : 'width';
  var handlePos = horizontal ? 'insetBlockStart' : 'insetInlineStart';
  var markInset = horizontal ? 'top' : 'insetInlineStart';
  return _ref2 = {}, _defineProperty(_ref2, railPadding, railSize), _defineProperty(_ref2, part, controlSize), _defineProperty(_ref2, "".concat(componentCls, "-rail"), (_$concat2 = {}, _defineProperty(_$concat2, full, '100%'), _defineProperty(_$concat2, part, railSize), _$concat2)), _defineProperty(_ref2, "".concat(componentCls, "-track"), _defineProperty({}, part, railSize)), _defineProperty(_ref2, "".concat(componentCls, "-handle"), _defineProperty({}, handlePos, (controlSize - handleSize) / 2)), _defineProperty(_ref2, "".concat(componentCls, "-mark"), (_$concat5 = {
    // Reset all
    insetInlineStart: 0,
    top: 0
  }, _defineProperty(_$concat5, markInset, handleSize), _defineProperty(_$concat5, full, '100%'), _$concat5)), _defineProperty(_ref2, "".concat(componentCls, "-step"), (_$concat6 = {
    // Reset all
    insetInlineStart: 0,
    top: 0
  }, _defineProperty(_$concat6, markInset, railSize), _defineProperty(_$concat6, full, '100%'), _defineProperty(_$concat6, part, railSize), _$concat6)), _defineProperty(_ref2, "".concat(componentCls, "-dot"), _defineProperty({
    position: 'absolute'
  }, handlePos, (railSize - dotSize) / 2)), _ref2;
}; // ============================ Horizontal ============================


var genHorizontalStyle = function genHorizontalStyle(token) {
  var componentCls = token.componentCls,
      marginPartWithMark = token.marginPartWithMark;
  return _defineProperty({}, "".concat(componentCls, "-horizontal"), _extends(_extends({}, genDirectionStyle(token, true)), _defineProperty({}, "&".concat(componentCls, "-with-marks"), {
    marginBottom: marginPartWithMark
  })));
}; // ============================= Vertical =============================


var genVerticalStyle = function genVerticalStyle(token) {
  var componentCls = token.componentCls;
  return _defineProperty({}, "".concat(componentCls, "-vertical"), _extends(_extends({}, genDirectionStyle(token, false)), {
    height: '100%'
  }));
}; // ============================== Export ==============================


export default genComponentStyleHook('Slider', function (token) {
  var sliderToken = mergeToken(token, {
    marginPart: (token.controlHeight - token.controlSize) / 2,
    marginFull: token.controlSize / 2,
    marginPartWithMark: token.controlHeightLG - token.controlSize,
    handleFocusShadow: "0 0 0 5px ".concat(new TinyColor(token.colorPrimary).setAlpha(0.12).toRgbString())
  });
  return [genBaseStyle(sliderToken), genHorizontalStyle(sliderToken), genVerticalStyle(sliderToken)];
}, function (token) {
  // Handle line width is always width-er 1px
  var increaseHandleWidth = 1;
  var controlSize = token.controlHeightSM / 2;
  var lineHandleWidth = token.lineWidth + increaseHandleWidth;
  return {
    controlSize: controlSize,
    railSize: controlSize / 3,
    handleSize: controlSize + lineHandleWidth,
    dotSize: controlSize / 3 * 2,
    lineHandleWidth: lineHandleWidth
  };
});