import * as React from 'react';
import * as PropTypes from 'prop-types';

import classNames from '../../utils/classnames';

export default function ScrollView({
  id,
  scrollY,
  scrollX,
  style,
  scrollTop,
  scrollLeft,
  scrollIntoView,
  className,
  children,
  upperThreshold = 50,
  lowerThreshold = 50,
  domRef,
  events,
}) {
  const [toUpper, setToUpper] = React.useState(false);
  const [toLower, setToLower] = React.useState(false);
  const [scrollLeftPos, setScrollLeftPos] = React.useState(0);
  const [scrollTopPos, setScrollTopPos] = React.useState(0);

  const scrollViewRef = domRef || React.useRef(null);

  const handleOnScroll = function (e) {
    const detail = {
      scrollLeft: e.target.scrollLeft,
      scrollTop: e.target.scrollTop,
      scrollHeight: e.target.scrollHeight,
      scrollWidth: e.target.scrollWidth,
    };
    const deltaY = scrollY ? e.target.scrollTop - scrollTopPos : 0;
    const deltaX = scrollX ? e.target.scrollLeft - scrollLeftPos : 0;
    let delta;
    // console.log(">>>>", deltaY, deltaX,e.target.scrollLeft,e.target.scrollTop)
    // 横向滚动
    if (Math.abs(deltaX) > Math.abs(deltaY)) {
      delta = deltaX;
      setScrollLeftPos(e.target.scrollLeft);
      if (scrollX && e.target.scrollLeft <= upperThreshold) {
        delta < 0 && setToUpper(true);
      } else {
        setToUpper(false);
      }

      if (
        scrollX &&
        e.target.scrollLeft + e.target.offsetWidth + lowerThreshold >=
          e.target.scrollWidth
      ) {
        delta > 0 && setToLower(true);
      } else {
        setToLower(false);
      }
    } else {
      delta = deltaY;
      setScrollTopPos(e.target.scrollTop);

      if (scrollY && e.target.scrollTop <= upperThreshold) {
        delta < 0 && setToUpper(true);
      } else {
        setToUpper(false);
      }

      if (
        scrollY &&
        e.target.scrollTop + e.target.offsetHeight + lowerThreshold >=
          e.target.scrollHeight
      ) {
        delta > 0 && setToLower(true);
      } else {
        setToLower(false);
      }
    }

    // console.log("delta", deltaY, deltaX

    events.scroll(detail, { originEvent: e });
  };

  React.useEffect(() => {
    // @ts-ignore
    scrollViewRef.current.scrollTop = scrollTop;
  }, [scrollTop]);
  React.useEffect(() => {
    // @ts-ignore
    scrollViewRef.current.scrollLeft = scrollLeft;
  }, [scrollLeft]);

  React.useEffect(() => {
    toUpper && events.scrolltoupper();
  }, [toUpper]);

  React.useEffect(() => {
    toLower && events.scrolltolower();
  }, [toLower]);

  React.useEffect(() => {
    if (scrollIntoView) {
      const children = scrollViewRef.current.children;
      const item = Array.from(children).find(
        (item) => item && item.id === scrollIntoView
      );
      scrollY && (scrollViewRef.current.scrollTop = item.offsetTop);
      scrollX && (scrollViewRef.current.scrollLeft = item.offsetLeft);
      // console.log('children', children, item)
    }
  }, [scrollIntoView]);

  const webStyles = {
    position: 'relative',
    width: '100%',
    height: '100%',
    // whiteSpace: scroll === 'y' ? 'normal' : 'nowrap',
    overflowX: `${scrollX ? 'auto' : 'hidden'}`,
    overflowY: `${scrollY ? 'auto' : 'hidden'}`,
    ...style,
  };
  const cls = classNames({
    'weda-ui': true,
    'g-scroll-view': true,
    [className]: className,
  });

  return (
    <div
      id={id}
      style={webStyles}
      ref={scrollViewRef}
      className={cls}
      onScrollCapture={handleOnScroll}
    >
      {children}
    </div>
  );
}

ScrollView.propTypes = {
  scrollX: PropTypes.bool,
  scrollY: PropTypes.bool,
  scrollTop: PropTypes.number,
  scrollLeft: PropTypes.number,
  scrollIntoView: PropTypes.string,
  upperThreshold: PropTypes.number,
  lowerThreshold: PropTypes.number,
  domRef: PropTypes.any,
  children: PropTypes.any,
  id: PropTypes.string,
  className: PropTypes.string,
  style: PropTypes.string,
  events: PropTypes.objectOf(PropTypes.func),
};

ScrollView.defaultProps = {
  scrollX: false,
  scrollY: true,
  upperThreshold: 50,
  lowerThreshold: 50,
  events: {},
};
