"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _vue = require("vue");
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _interface = require("../interface");
var _util = require("../util");
var _useColorDrag = _interopRequireDefault(require("../hooks/useColorDrag"));
var _Palette = _interopRequireDefault(require("./Palette"));
var _Transform = _interopRequireDefault(require("./Transform"));
var _Handler = _interopRequireDefault(require("./Handler"));
const pickerProps = () => (0, _extends2.default)({}, (0, _interface.baseColorPickerProps)());
const Picker = (0, _vue.defineComponent)({
  name: 'Picker',
  inheritAttrs: false,
  props: pickerProps(),
  setup(props) {
    const pickerRef = (0, _vue.ref)();
    const transformWrapperRef = (0, _vue.ref)();
    const transformRef = (0, _vue.computed)(() => {
      var _a;
      return (_a = transformWrapperRef.value) === null || _a === void 0 ? void 0 : _a.divRef;
    });
    const colorRef = (0, _vue.ref)(props.color);
    const onDragChange = offsetValue => {
      const calcColor = (0, _util.calculateColor)({
        offset: offsetValue,
        targetRef: transformRef.value,
        containerRef: pickerRef.value,
        color: props.color
      });
      colorRef.value = calcColor;
      props.onChange(calcColor);
    };
    const [offset, dragStartHandle] = (0, _useColorDrag.default)({
      color: (0, _vue.toRef)(props, 'color'),
      containerRef: pickerRef,
      targetRef: transformRef,
      calculate: () => (0, _util.calcOffset)(props.color),
      onDragChange,
      onDragChangeComplete: () => {
        var _a;
        return (_a = props.onChangeComplete) === null || _a === void 0 ? void 0 : _a.call(props, colorRef.value);
      },
      disabledDrag: (0, _vue.toRef)(props, 'disabled')
    });
    return () => {
      const {
        prefixCls,
        color
      } = props;
      return (0, _vue.createVNode)("div", {
        "ref": pickerRef,
        "class": `${prefixCls}-select`,
        "onMousedown": dragStartHandle,
        "onTouchstart": dragStartHandle
      }, [(0, _vue.createVNode)(_Palette.default, {
        "prefixCls": prefixCls
      }, {
        default: () => [(0, _vue.createVNode)(_Transform.default, {
          "x": offset.value.x,
          "y": offset.value.y,
          "ref": transformWrapperRef
        }, {
          default: () => [(0, _vue.createVNode)(_Handler.default, {
            "color": color.toRgbString(),
            "prefixCls": prefixCls
          }, null)]
        }), (0, _vue.createVNode)("div", {
          "class": `${prefixCls}-saturation`,
          "style": {
            backgroundColor: `hsl(${color.toHsb().h},100%, 50%)`,
            backgroundImage: 'linear-gradient(0deg, #000, transparent),linear-gradient(90deg, #fff, hsla(0, 0%, 100%, 0))'
          }
        }, null)]
      })]);
    };
  }
});
var _default = exports.default = Picker;