import React, { useRef, useState, useEffect, forwardRef } from 'react';
import './index.less';
import classNames from 'classnames';
import { translateNumberOrToPx } from '../../config/utils';

//todo:把方法穿透出去

export type Easing = 'ease-in-out' | 'ease-in' | 'ease-out' | 'ease' | 'linear';

interface ImageScrollYouKuProps {
  onClick?: (item: object, index: number) => void;
  prev?: () => void;
  next?: () => void;
  imgList: object[];
  className?: string;
  animationBuffer?: boolean;
  keepArrowVisible?: boolean;
  style?: React.CSSProperties;
  showText?: boolean;
  number?: number;
  width?: number;
  easing?: Easing | string;
  imageHeight?: number;
  scrollImageNumber?: number;
  space?: number | string;
}

const ImageScrollYouKu: React.FC<ImageScrollYouKuProps> = (props) => {
  const {
    onClick,
    prev,
    next,
    imgList = [],
    className,
    style = {},
    showText = false, //展示描述文字
    animationBuffer = false, //动画效果
    keepArrowVisible = false, //保持箭头可见
    number = 4, //可见的图片个数
    scrollImageNumber = number, //每次切换滚动图片张数
    width = 800, //整个宽度
    imageHeight = 200, //图片高度
    space = '1%', //图片间隔
    easing = 'ease-in-out', //动画效果
  } = props;

  const ref: React.RefObject<any> = useRef();
  const refImage: React.RefObject<any> = useRef();
  const imageSpace = translateNumberOrToPx(space);

  const [translateX, setTranslateX] = useState<number>(0); //每次偏移数值
  const [buffer, setBuffer] = useState<boolean>(true); //动画缓冲
  const [scrollTimes, setScrollTimes] = useState<number>(0);

  useEffect(() => {
    computedScrollTimes();
    let timeFun: any;
    window.onresize = () => {
      setTranslateX(0);
    };
    let time = 0;
    timeFun =
      animationBuffer &&
      setInterval(() => {
        time++;
        if (time > 3) {
          setBuffer(false);
        }
      }, 1000);
    return () => {
      clearInterval(timeFun);
      window.onresize = null;
    };
  }, []);

  const computedScrollTimes = () => {
    const imageLength = imgList.length;
    const scrollTimes: number = Math.ceil(
      Number(imageLength / scrollImageNumber),
    );
    setScrollTimes(scrollTimes - 1);
  };

  /**
   * 点击右侧按钮
   */
  const clickNextIcon = (event: React.SyntheticEvent): void => {
    event.stopPropagation();
    setScrollTimes((data) => {
      //到最后一页时候需要停止点击按钮
      if (data >= 1) {
        let defaultScrollWidth =
          ref.current.offsetWidth * (scrollImageNumber / number);
        setTranslateX(translateX - defaultScrollWidth); //每次滚动可见区域宽度
        return data - 1;
      } else {
        return data;
      }
    });
    next && next();
  };

  /**
   * 点击左侧按钮
   */
  const clickPrevIcon = (event: React.SyntheticEvent): void => {
    event.stopPropagation();
    if (translateX === 0) return;
    let defaultScrollWidth =
      ref.current.offsetWidth * (scrollImageNumber / number);
    setTranslateX(translateX + defaultScrollWidth);
    setScrollTimes((data) => {
      return data + 1;
    });
    prev && prev();
  };

  const getWidth = (): string => {
    return `calc((100% - ${imageSpace} * ${Number(number)}) / ${Number(
      number,
    )})`;
  };

  const classString = classNames({
    'open-scroll-image-cache': animationBuffer && buffer,
    'open-scroll-img': true,
  });

  const classWrap = classNames(
    {
      'open-scroll-image': true,
    },
    className,
  );

  const spanPrevClass = classNames({
    'open-scroll-prev-icon': true,
    'open-scroll-arrow-visible-none': keepArrowVisible
      ? false
      : translateX === 0,
  });

  const spanNextClass = classNames({
    'open-scroll-next-icon': true,
    'open-scroll-arrow-visible-none': keepArrowVisible
      ? false
      : scrollTimes <= 0,
  });

  const ulClass = classNames({
    [`open-scroll-ul-${easing}`]: true,
  });

  const renderImageList =
    imgList &&
    imgList.map((item: any, index: number) => {
      return (
        <li
          style={{
            marginRight: imageSpace,
            width: getWidth(),
            minWidth: getWidth(),
          }}
          key={item.imgUrl + index}
        >
          <div
            className={classString}
            ref={refImage}
            style={{
              height: imageHeight,
              cursor: onClick ? 'pointer' : 'default',
            }}
            onClick={() => onClick && onClick(item, index)}
          >
            <img
              draggable={false}
              src={item.imgUrl}
              title={item.name}
              alt={item.name}
              style={{ height: imageHeight }}
            />
          </div>
          {showText && (
            <div className={'open-scroll-text'}>
              <div className={'open-scroll-text-title'}>
                <a
                  onClick={() => onClick && onClick(item, index)}
                  style={{ cursor: onClick ? 'pointer' : 'default' }}
                >
                  {item.name}
                </a>
              </div>
              <div className={'open-scroll-desc'}>{item.desc}</div>
            </div>
          )}
        </li>
      );
    });

  return (
    <div
      className={classWrap}
      style={Object.assign(style, {
        width,
        height: imageHeight + (showText ? 60 : 0),
      })}
    >
      <div
        className={'open-scroll-left-right-icon'}
        style={{
          height: imageHeight,
          lineHeight: translateNumberOrToPx(imageHeight),
        }}
      >
        <span className={spanPrevClass} onClick={clickPrevIcon} />
        <span className={spanNextClass} onClick={clickNextIcon} />
      </div>
      <ul
        style={{
          transform: `translateX(${translateX}px)`,
          width: `calc(100% + ${imageSpace})`,
        }}
        className={ulClass}
        ref={ref}
      >
        {renderImageList}
      </ul>
    </div>
  );
};

export default ImageScrollYouKu;