import React, { useState, useEffect, useCallback, useMemo, useRef } from 'react';
import { Modal } from 'antd';
import './index.less';
import Draggable from 'react-draggable';
import Slider from '../../Slider';
import Icon from '@/tenants-ui/SgIcon';
import { changeManualTempHttp } from '@/services/sagacare_service/equipment';

export default ({ hideColour, colourObj }) => {
  const [startTime, setStartTime] = useState(0);
  //const [colourItem, setColourItem] = useState({});
  const [renew, setRenew] = useState(true);
  const [disabled, setDisabled] = useState(false);
  const [bounds, setBounds] = useState({
    left: 0,
    top: 0,
    bottom: 0,
    right: 0,
  });

  const colourItem = useMemo(() => {
    // 开始滑动了 就不再更新父级数据

    if (renew && colourObj) {
      var colourVal = JSON.parse(JSON.stringify(colourObj));
      if (colourVal.brightValue === colourVal.brightMinValue) {
        colourVal.brightValue = 0;
        colourVal.brightPercent = 0;
      } else {
        const brightPercent =
          (colourVal.brightValue / (colourVal.brightMaxValue - colourVal.brightMinValue + 1)) * 100;
        colourVal.brightPercent = Math.round(brightPercent);
      }
      if (colourVal.colorTempValue === colourVal.colorTempMinValue) {
        colourVal.colorTempValue = 0;
        colourVal.tempPercent = 0;
      } else {
        const tempPercent =
          (colourVal.colorTempValue /
            (colourVal.colorTempMaxValue - colourVal.colorTempMinValue + 1)) *
          100;
        colourVal.tempPercent = Math.round(tempPercent);
      }
      return JSON.parse(JSON.stringify(colourVal));
    }
    return {};
  }, [colourObj]);

  // 下发色温指令
  const setColourOrder = (obj) => {
    let paramsObj = JSON.parse(JSON.stringify(obj));
    paramsObj.id = colourItem.id;
    paramsObj.code = obj.type;
    delete paramsObj.type;
    const arr = [paramsObj];
    changeManualTempHttp(arr);
  };
  //转化为后台需要的数据
  const countValFunc = useCallback(
    (obj) => {
      let dxValue = 0;
      if (obj.type === 'brightSet') {
        if (obj.value < colourItem.brightMinValue) {
          obj.value = colourItem.brightMinValue;
          return obj;
        }
        dxValue = colourItem.brightMaxValue - colourItem.brightMinValue + 1;
      } else {
        if (obj.value < colourItem.colorTempMinValue) {
          obj.value = colourItem.brightMinValue;
          return obj;
        }
        dxValue = colourItem.colorTempMaxValue - colourItem.colorTempMinValue + 1;
      }

      obj.value = Math.round((obj.value / 100) * dxValue);
      return obj;
    },
    [colourItem],
  );
  // 滑动
  const silderVal = (obj) => {
    // 值  obj.value  色温还是亮度 obj.type
    obj = countValFunc(obj);
    const endTime = Date.parse(new Date());
    const dx = endTime - startTime;
    if (dx === 1000) {
      setStartTime(endTime);
      setColourOrder(obj);
    }
  };
  // 滑动开始
  const mouseStart = () => {
    let nowTime = Date.parse(new Date());
    setStartTime(nowTime);
    setRenew(false);
  };
  // 滑动停止
  const mouseEnd = (obj) => {
    obj = countValFunc(obj);

    setColourOrder(obj);
  };

  const draggleRef = useRef(null);
  const onStart = (_event, uiData) => {
    _event.stopPropagation();
    const { clientWidth, clientHeight } = window.document.documentElement;
    const targetRect = draggleRef.current?.getBoundingClientRect();

    if (!targetRect) {
      return;
    }
    setBounds({
      left: -targetRect.left + uiData.x,
      right: clientWidth - (targetRect.right - uiData.x),
      top: -targetRect.top + uiData.y,
      bottom: clientHeight - (targetRect.bottom - uiData.y),
    });
  };

  return (
    <Modal
      open
      mask={false}
      centered
      footer={null}
      style={{
        width: '100%',
      }}
      modalRender={(modal) => (
        <Draggable
          disabled={disabled}
          bounds={bounds}
          onStart={(event, uiData) => onStart(event, uiData)}
        >
          <div ref={draggleRef}>{modal}</div>
        </Draggable>
      )}
      closable={false}
    >
      <div className="colourModal">
        <div className="colourClose">
          <div
            className="closeIcon"
            onClick={() => {
              hideColour();
            }}
          >
            <Icon type="close" />
          </div>
        </div>
        <div className="lampTitle">{colourItem.localName}</div>
        {colourItem.bright && (
          <div>
            <Slider
              onlyLine={false}
              typeValue={colourItem.brightPercent}
              typeName={'亮度'}
              type={'brightSet'}
              silderPercentValue={silderVal}
              silderMouseEnd={mouseEnd}
              silderMouseStart={mouseStart}
            ></Slider>
          </div>
        )}
        {colourItem.colorTemperature && (
          <div>
            <Slider
              onlyLine={true}
              typeValue={colourItem.tempPercent}
              typeName={'色温'}
              type={'colorTemperatureSet'}
              silderPercentValue={silderVal}
              silderMouseEnd={mouseEnd}
              silderMouseStart={mouseStart}
            ></Slider>
          </div>
        )}
      </div>
    </Modal>
  );
};
