import React, { useState, useEffect, useRef, useCallback } from 'react';
import { Spin } from 'antd';
import styles from './index.less';
import cx from 'classnames';

export default ({
  minValue,
  maxValue,
  typeName,
  type,
  typeValue,
  onlyLine,
  silderPercentValue,
  silderMouseEnd,
  silderMouseStart,
}) => {
  const [buttonLeft, setButtonLeft] = useState(0);
  const [precentValue, setPrecentValue] = useState(0);
  const [minWidth] = useState(0);
  const [maxWidth, setMaxWidth] = useState(0);
  const [startPoint, setStartPoint] = useState({});
  const [movesign, setMovesign] = useState(false);
  var barRef = useRef();
  useEffect(() => {
    //underfloorHeat 是地暖
    if (
      (type == 'underfloorHeat' || type == 'air' || type == 'oneair') &&
      (!typeValue || !maxValue || !minValue)
    )
      return;
    var barWidth = (barRef.current || {}).clientWidth || 0;
    var barmax = barWidth - 28;
    var buttonLeftT;
    if (type == 'underfloorHeat' || type == 'air' || type == 'oneair') {
      buttonLeftT = parseInt(((typeValue - minValue) / (maxValue - minValue)) * barmax);
    } else {
      buttonLeftT = parseInt((typeValue / 100) * barmax);
    }

    if (buttonLeftT > barmax) {
      // 滑动位置大于进度条最大宽度的时候让它为最大宽度
      buttonLeftT = barmax;
    }
    if (buttonLeftT < minWidth) {
      // 滑动位置小于进度条最大宽度的时候让它为最小宽度
      buttonLeftT = minWidth;
    }
    setButtonLeft(buttonLeftT);
    setPrecentValue(typeValue);
    setMaxWidth(barmax);
  }, [typeValue, maxValue, minValue]);

  const touchstart = (ev) => {
    setMovesign(true);
    setStartPoint(ev);
    silderMouseStart && silderMouseStart();
  };
  const touchmove = (ev) => {
    //console.log('touchmove', ev);
    if (!movesign) return;

    var endPoint = ev;
    var translateX = endPoint.clientX - (startPoint.clientX || 0);
    setStartPoint(endPoint);

    var buttonLeftT = buttonLeft + translateX;

    if (buttonLeftT > maxWidth) {
      // 滑动位置大于进度条最大宽度的时候让它为最大宽度
      buttonLeftT = maxWidth;
    }
    if (buttonLeftT < minWidth) {
      // 滑动位置小于进度条最大宽度的时候让它为最小宽度
      buttonLeftT = minWidth;
    }

    setButtonLeft(buttonLeftT);
    if (type == 'underfloorHeat' || type == 'air' || type == 'oneair') {
      var value =
        Math.floor((buttonLeftT / maxWidth) * ((maxValue - minValue) * 2 + 1)) * 0.5 + minValue;
      if (value > maxValue) {
        value = maxValue;
      }
      if (value < minValue) {
        value = minValue;
      }
    } else {
      var value = parseInt((buttonLeftT / maxWidth) * 100);
    }

    setPrecentValue(value);
    silderPercentValue && silderPercentValue({ value: value, type: type });
  };

  const barClick = useCallback(
    (e) => {
      var pageX = Number(e.pageX); // 页面触点Y坐标
      var barRefCurrent = barRef.current || {};

      var barDomLeft = barRefCurrent.getBoundingClientRect()?.left || 0;
      var moveX = pageX - barDomLeft - 8;

      var transX2 = moveX;

      if (transX2 < 0) {
        // transX只能是正的
        transX2 = 0;
      }
      if (transX2 > maxWidth) {
        transX2 = maxWidth;
      }

      setButtonLeft(transX2);
      if (type == 'underfloorHeat' || type == 'air' || type == 'oneair') {
        var value =
          Math.floor((transX2 / maxWidth) * ((maxValue - minValue) * 2 + 1)) * 0.5 + minValue;
        if (value > maxValue) {
          value = maxValue;
        }
        if (value < minValue) {
          value = minValue;
        }
      } else {
        var value = parseInt((transX2 / maxWidth) * 100);
      }

      setPrecentValue(value);
      silderMouseEnd && silderMouseEnd({ value: value, type: type });
    },
    [maxWidth, precentValue, type],
  );

  const touchend = useCallback(() => {
    if (!movesign) return;
    setMovesign(false);

    silderMouseEnd && silderMouseEnd({ value: precentValue, type: type });
  }, [precentValue, type, movesign]);

  const changeMoveSign = () => {
    setMovesign(false);
  };
  useEffect(() => {
    document.addEventListener('mouseup', changeMoveSign);
    return () => {
      document.removeEventListener('mouseup', changeMoveSign);
    };
  }, []);
  return (
    <div
      className={cx(styles.slider, {
        [styles.heatSlider]: type == 'underfloorHeat',
        [styles.curtainSlider]: type == 'curtain',
      })}
      onMouseDown={(event) => {
        event.stopPropagation();
      }}
      onMouseUp={(event) => {
        touchend();
      }}
      onMouseMove={(event) => {
        touchmove(event);
      }}
    >
      {type != 'underfloorHeat' && type != 'air' && type != 'oneair' && (
        <div className={styles.textBox}>
          <div className={styles.text}>{typeName}</div>
          <div className={styles.textNum}>{precentValue}%</div>
        </div>
      )}
      {type == 'oneair' && (
        <div className={styles.textBox}>
          <div className={styles.text}>{typeName}</div>
          <div className={styles.textNum}>{precentValue}℃</div>
        </div>
      )}
      <div
        className={styles.box}
        onMouseDown={(event) => {
          event.stopPropagation();
        }}
      >
        <div
          className={cx(styles.line, { [styles.lineBg]: !onlyLine })}
          ref={barRef}
          onClick={(event) => {
            barClick(event);
          }}
        >
          <div>{minValue}</div>
          <div>{maxValue}</div>
        </div>
        {!onlyLine && (
          <div
            className={styles.activeLine}
            onClick={(event) => {
              barClick(event);
            }}
            style={{ width: buttonLeft + 19 }}
          ></div>
        )}
        {type == 'curtain' && (
          <div className={styles.curtainLine}>
            <span>关</span>
            <span></span>开
          </div>
        )}
        <div
          className={styles.btn}
          style={{ left: buttonLeft }}
          onMouseDown={(event) => {
            event.stopPropagation();
            touchstart(event);
          }}
        >
          {(type == 'underfloorHeat' || type == 'air') && (
            <div className={styles.value}>{precentValue}℃</div>
          )}
        </div>
      </div>
    </div>
  );
};
