"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _vue = require("vue");
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _useColorDrag3 = _interopRequireDefault(require("../hooks/useColorDrag"));
var _util = require("../util");
var _Handler = _interopRequireDefault(require("./Handler"));
var _Palette = _interopRequireDefault(require("./Palette"));
var _Transform = _interopRequireDefault(require("./Transform"));
var Picker = (0, _vue.defineComponent)({
  name: 'Picker',
  props: ['color', 'prefixCls', 'onChange', 'onChangeComplete', 'disabled'],
  setup: function setup(props) {
    var pickerRef = (0, _vue.shallowRef)();
    var transformRef = (0, _vue.shallowRef)();
    var colorRef = (0, _vue.ref)(props.color);
    var disabledDrag = (0, _vue.computed)(function () {
      return props.disabled;
    });
    (0, _vue.watchEffect)(function () {
      colorRef.value = props.color;
    });
    var _useColorDrag = (0, _useColorDrag3.default)({
        colorRef: colorRef,
        containerRef: pickerRef,
        targetRef: transformRef,
        calculate: function calculate(containerRef) {
          return (0, _util.calculateOffset)(containerRef, transformRef, colorRef);
        },
        onDragChange: function onDragChange(offsetValue) {
          var calcColor = (0, _util.calculateColor)({
            offset: offsetValue,
            targetRef: transformRef,
            containerRef: pickerRef,
            color: props.color
          });
          colorRef.value = calcColor;
          props === null || props === void 0 ? void 0 : props.onChange(calcColor);
        },
        onDragChangeComplete: function onDragChangeComplete() {
          var _props$onChangeComple;
          return props === null || props === void 0 ? void 0 : (_props$onChangeComple = props.onChangeComplete) === null || _props$onChangeComple === void 0 ? void 0 : _props$onChangeComple.call(props, colorRef.value);
        },
        disabledDrag: disabledDrag
      }),
      _useColorDrag2 = (0, _slicedToArray2.default)(_useColorDrag, 2),
      offset = _useColorDrag2[0],
      dragStartHandle = _useColorDrag2[1];
    return function () {
      return (0, _vue.createVNode)("div", {
        "ref": pickerRef,
        "class": "".concat(props.prefixCls, "-select"),
        "onMousedown": dragStartHandle,
        "onTouchstart": dragStartHandle
      }, [(0, _vue.createVNode)(_Palette.default, {
        "prefixCls": props.prefixCls
      }, {
        default: function _default() {
          return [(0, _vue.createVNode)(_Transform.default, {
            "offset": offset.value,
            "ref": transformRef
          }, {
            default: function _default() {
              return [(0, _vue.createVNode)(_Handler.default, {
                "color": props.color.toRgbString(),
                "prefixCls": props.prefixCls
              }, null)];
            }
          }), (0, _vue.createVNode)("div", {
            "class": "".concat(props.prefixCls, "-saturation"),
            "style": {
              backgroundColor: "hsl(".concat(props.color.toHsb().h, ",100%, 50%)"),
              backgroundImage: 'linear-gradient(0deg, #000, transparent),linear-gradient(90deg, #fff, hsla(0, 0%, 100%, 0))'
            }
          }, null)];
        }
      })]);
    };
  }
});
var _default2 = Picker;
exports.default = _default2;