"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.default = void 0;
var _react = _interopRequireDefault(require("react"));
var _AngleInput = require("./AngleInput.constants");
var _AngleInputSt = require("./AngleInput.st.css.js");
var _useAngleInput = require("./hooks/useAngleInput");
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/cjs/AngleInput/AngleInput.tsx";
var AngleInput = _ref => {
  var {
    onChange,
    onPointerDown,
    onPointerUp,
    onFocus,
    onBlur,
    dataHook,
    value,
    disabled = false,
    step = 1
  } = _ref;
  var {
    rootRef,
    handlePointerDown,
    handlePointerUp,
    handlePointerMove,
    handleInputChange,
    handleKeyboardEvent,
    handleFocus,
    handleBlur
  } = (0, _useAngleInput.useAngleInput)({
    onChange,
    onPointerDown,
    onPointerUp,
    onFocus,
    onBlur,
    step
  });
  return /*#__PURE__*/_react.default.createElement("div", {
    onPointerDown: handlePointerDown,
    onPointerMove: handlePointerMove,
    onPointerUp: handlePointerUp,
    className: (0, _AngleInputSt.st)(_AngleInputSt.classes.root, {
      disabled
    }),
    "data-hook": dataHook,
    "aria-disabled": disabled,
    ref: rootRef,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 37,
      columnNumber: 5
    }
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: _AngleInputSt.classes.track,
    "data-hook": _AngleInput.dataHooks.track,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 46,
      columnNumber: 7
    }
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: (0, _AngleInputSt.st)(_AngleInputSt.classes.knobWrapper),
    "data-hook": _AngleInput.dataHooks.knobWrapper,
    style: {
      transform: "rotate(".concat(value, "deg)")
    },
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 47,
      columnNumber: 9
    }
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: (0, _AngleInputSt.st)(_AngleInputSt.classes.knob),
    "data-hook": _AngleInput.dataHooks.knob,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 54,
      columnNumber: 11
    }
  }, /*#__PURE__*/_react.default.createElement("input", {
    type: "range",
    value: value,
    className: _AngleInputSt.classes.visuallyHiddenInput,
    onChange: handleInputChange,
    onKeyDown: handleKeyboardEvent,
    onFocus: handleFocus,
    step: step,
    onBlur: handleBlur,
    min: _AngleInput.angleLimits.min,
    max: _AngleInput.angleLimits.max,
    disabled: disabled,
    "data-hook": _AngleInput.dataHooks.input,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 55,
      columnNumber: 13
    }
  }))), /*#__PURE__*/_react.default.createElement("div", {
    className: _AngleInputSt.classes.arm,
    style: {
      transform: "rotate(".concat(value, "deg)")
    },
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 72,
      columnNumber: 9
    }
  })));
};
AngleInput.displayName = 'AngleInput';
var _default = exports.default = AngleInput;
//# sourceMappingURL=AngleInput.js.map