var __assign = this && this.__assign || function () {
  __assign = Object.assign || function (t) {
    for (var s, i = 1, n = arguments.length; i < n; i++) {
      s = arguments[i];

      for (var p in s) {
        if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
      }
    }

    return t;
  };

  return __assign.apply(this, arguments);
};

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import * as React from 'react';
import { useSetState, useDebounceEffect, useUpdateEffect } from 'ahooks';
import "./index.css";
import { useLongPress } from 'use-long-press';
import { IconButton } from "../../button";
import isNumber from 'lodash/isNumber';
import { useMouse } from 'react-use';
var prefix = 'mdt-table-scroll-x';
var ScrollX = /*#__PURE__*/React.memo(function (props) {
  var event$ = props.event$,
      allWidth = props.allWidth,
      width = props.width,
      stepWidth = props.stepWidth;

  var _a = useSetState({
    minX: 0,
    maxX: 0,
    originX: 0,
    offsetX: 0,
    x: 0,
    pressStart: false,
    barWidth: 0,
    scrollWidth: props.scrollWidth,
    scrollMax: 0 // table 在 x 轴 可滚动范围

  }),
      state = _a[0],
      setState = _a[1];

  var ref = React.useRef(null);
  var minX = state.minX,
      maxX = state.maxX;
  var mouse = useMouse(ref);
  useDebounceEffect(function () {
    var barWidth = width / allWidth * state.scrollWidth;
    var maxX = state.scrollWidth - barWidth + 2;
    var scrollMax = allWidth - width + 2;
    setState({
      barWidth: barWidth,
      maxX: maxX,
      scrollMax: scrollMax
    });
  }, [allWidth, setState, state.scrollWidth, width]);
  var callback = React.useCallback(function () {// alert("Long pressed!");
  }, []);

  var setX = function setX(num) {
    setState({
      x: state.x + num
    });
  }; // eslint-disable-next-line @typescript-eslint/ban-ts-comment
  // @ts-ignore


  var bind = useLongPress(callback, {
    onStart: function onStart(event) {
      // console.log('Press started', state);
      var target = event === null || event === void 0 ? void 0 : event.target;

      if (target.className === prefix + "-bar") {
        setState({
          pressStart: true,
          originX: mouse.docX
        });
      } else {
        var left = target.getBoundingClientRect().left; // eslint-disable-next-line @typescript-eslint/ban-ts-comment
        // @ts-ignore

        var pageX = (event || {}).pageX;

        if (isNumber(pageX - left) && !state.pressStart) {
          setX(pageX - left - state.x - state.barWidth / 2);
          setState({
            pressStart: true,
            originX: mouse.docX
          });
        }
      }
    },
    onFinish: function onFinish() {
      // console.log('Long press finished');
      var originX = 0;
      var offsetX = 0;
      var x = state.x + state.offsetX;
      if (x < minX) x = minX;
      if (x > maxX) x = maxX;
      setState({
        pressStart: false,
        originX: originX,
        offsetX: offsetX,
        x: x
      });
    },
    onCancel: function onCancel() {
      return; // console.log('Press cancelled');
      // const originX = 0;
      // const offsetX = 0;
      // let x = state.x + state.offsetX;
      // if (x < minX) x = minX;
      // if (x > maxX) x = maxX;
      // setState({ pressStart: false, originX, offsetX, x });
    },
    onMove: function onMove() {
      if (state.pressStart) {
        // 偏移量
        var offsetX = mouse.docX - state.originX;
        setState({
          offsetX: offsetX
        });
      }
    },
    threshold: 100,
    captureEvent: true,
    cancelOnMovement: false,
    detect: 'both'
  });
  event$ === null || event$ === void 0 ? void 0 : event$.useSubscription(function (value) {
    if (isNumber(value) && !state.pressStart) {
      var scrollMax = state.scrollMax,
          maxX_1 = state.maxX;
      var proportion = value / scrollMax;
      proportion = proportion > 1 ? 1 : proportion;
      setState({
        x: proportion * maxX_1 || 0
      });
    }
  });
  var translateX = state.x + state.offsetX;
  if (translateX < minX) translateX = minX;
  if (translateX > maxX) translateX = maxX;
  useUpdateEffect(function () {
    var scrollMax = state.scrollMax,
        maxX = state.maxX;
    var scrollLeft = translateX / maxX * scrollMax;
    event$ === null || event$ === void 0 ? void 0 : event$.emit(scrollLeft);
  }, [translateX]);
  useUpdateEffect(function () {
    setState({
      scrollWidth: props.scrollWidth
    });
  }, [props.scrollWidth]);
  return _jsxs("div", __assign({
    ref: ref,
    className: prefix,
    style: {
      width: state.scrollWidth + 42
    }
  }, {
    children: [_jsx(IconButton, {
      className: prefix + "-left-icon",
      type: "only-icon",
      icon: "arrow-left",
      onClick: function onClick() {
        var x = state.x - maxX * (stepWidth / allWidth);
        x = x < 0 ? 0 : x;
        setState({
          x: x
        });
      }
    }, void 0), _jsx("div", __assign({
      className: prefix + "-content"
    }, bind, {
      style: {
        width: state.scrollWidth
      }
    }, {
      children: _jsx("div", {
        style: {
          transform: "translateX(" + translateX + "px)",
          width: state.barWidth
        },
        className: prefix + "-bar"
      }, void 0)
    }), void 0), _jsx(IconButton, {
      className: prefix + "-right-icon",
      type: "only-icon",
      icon: "arrow-right",
      onClick: function onClick() {
        var x = state.x + maxX * (stepWidth / allWidth);
        x = x < 0 ? 0 : x;
        setState({
          x: x
        });
      }
    }, void 0)]
  }), void 0);
});
export default ScrollX;

