import React, { useEffect, useState } from 'react';
import TagCom from './IOTSlider';
import { resolveRule, debounce } from '../../base/utils';

const Build: React.FC<any> = (props: any) => {
  const { attrData, uiStreams, ruleJson, buildHandler } = props;
  const [attr, setAttr] = useState<any>({});
  const streamId = attrData['streamId'];
  const curValue = uiStreams[streamId] && uiStreams[streamId] !== '' ? uiStreams[streamId] : attrData['min']

  const endHandler = (item: any) => {
    const obj: any = {}
    obj[streamId] = item['value'] + ''
    if (curValue + '' !== obj[streamId]) {
      debounce(() => {
        buildHandler(obj);
      }, 500)();
    }
  }

  const startHandler = (item: any) => {
  }

  useEffect(() => {
    const streamId = attrData['streamId'];
    const curValue = uiStreams[streamId] && uiStreams[streamId] !== '' ? uiStreams[streamId] : attrData['min']
    const attr = resolveRule({ ...attrData, curValue, startHandler, endHandler }, ruleJson, uiStreams);
    attr['originType'] && delete attr.originType;
    setAttr({ ...attr });
  }, [uiStreams,attrData]);

  return (<>
    {
      JSON.stringify(attr) === "{}" ?
        (<div></div>) :
        (<TagCom {...attr} />)
    }
  </>)
}

export default Build;