import { computed, defineComponent, ref, toRef, createVNode as _createVNode } from 'vue';
import { Color } from '../color';
import { calcOffset, calculateColor } from '../util';
import useColorDrag from '../hooks/useColorDrag';
import classNames from '../../_util/classNames';
import Palette from './Palette';
import Transform from './Transform';
import Handler from './Handler';
import Gradient from './Gradient';
export const baseSliderProps = () => ({
  prefixCls: String,
  colors: Array,
  min: Number,
  max: Number,
  value: Number,
  disabled: Boolean,
  onChange: Function,
  onChangeComplete: Function,
  type: String,
  color: Object
});
const Slider = defineComponent({
  name: 'Slider',
  inheritAttrs: false,
  props: baseSliderProps(),
  setup(props) {
    const sliderRef = ref();
    const transformWrapperRef = ref();
    const transformRef = computed(() => {
      var _a;
      return (_a = transformWrapperRef.value) === null || _a === void 0 ? void 0 : _a.divRef;
    });
    const colorRef = ref(props.color);
    const getValue = c => {
      return props.type === 'hue' ? c.getHue() : c.a * 100;
    };
    const onDragChange = offsetValue => {
      const calcColor = calculateColor({
        offset: offsetValue,
        targetRef: transformRef.value,
        containerRef: sliderRef.value,
        color: props.color,
        type: props.type
      });
      colorRef.value = calcColor;
      props.onChange(getValue(calcColor));
    };
    const [offset, dragStartHandle] = useColorDrag({
      color: toRef(props, 'color'),
      targetRef: transformRef,
      containerRef: sliderRef,
      calculate: () => calcOffset(props.color, props.type),
      onDragChange,
      onDragChangeComplete() {
        props.onChangeComplete(getValue(colorRef.value));
      },
      direction: ref('x'),
      disabledDrag: toRef(props, 'disabled')
    });
    const handleColor = computed(() => {
      if (props.type === 'hue') {
        const hsb = props.color.toHsb();
        hsb.s = 1;
        hsb.b = 1;
        hsb.a = 1;
        const lightColor = new Color(hsb);
        return lightColor;
      }
      return props.color;
    });
    // ========================= Gradient =========================
    const gradientList = computed(() => props.colors.map(info => `${info.color} ${info.percent}%`));
    // ========================== Render ==========================
    return () => {
      const {
        prefixCls,
        type
      } = props;
      return _createVNode("div", {
        "ref": sliderRef,
        "class": classNames(`${prefixCls}-slider`, `${prefixCls}-slider-${type}`),
        "onMousedown": dragStartHandle,
        "onTouchstart": dragStartHandle
      }, [_createVNode(Palette, {
        "prefixCls": prefixCls
      }, {
        default: () => [_createVNode(Transform, {
          "x": offset.value.x,
          "y": offset.value.y,
          "ref": transformWrapperRef
        }, {
          default: () => [_createVNode(Handler, {
            "size": "small",
            "color": handleColor.value.toHexString(),
            "prefixCls": prefixCls
          }, null)]
        }), _createVNode(Gradient, {
          "colors": gradientList.value,
          "type": type,
          "prefixCls": prefixCls
        }, null)]
      })]);
    };
  }
});
export default Slider;