import React, { useEffect, useState } from 'react';
import { iIOTExecutePowerProps } from './interface';
import './style/index.less';

const prefixCls = 'iot-execute-power-out';

const IOTExecutePower: React.FC<iIOTExecutePowerProps> = ({
  title,
  streamId,
  curValue,
  subTitle,
  icon,
  btnIcon,
  disabled,
  streamName,
  executeValue,
  isBuild = false,
  handler,
  ...rest
}) => {

  const [clickActive, setClickActive] = useState<boolean>(false);
  const [textActive, setTextActive] = useState<boolean>(false);
  let timer1: any = null;
  let timer2: any = null;

  useEffect(() => {
    if (clickActive) {
      timer1 = setTimeout(() => {
        setClickActive(false);
      }, 1500)
    }
  }, [clickActive])

  useEffect(() => {
    if (textActive) {
      timer2 = setTimeout(() => {
        setTextActive(false);
      }, 1000)
    }
  }, [textActive])

  return (
    <>
      <div className={prefixCls} {...rest}>
        <div className='iot-power'>
          <div className='power-left'>
            {
              icon?.show && (
                <div className="power-icon">
                  <span className={['power-icon-image', icon?.value ? icon.value : 'insideicon-cu-1'].join(' ')}></span>
                </div>
              )
            }
            <div className="power-title" style={{ marginLeft: icon?.show ? '0' : '.2rem' }} >
              <div className="power-main" >{title}</div>
              {
                subTitle?.show && (
                  <div className="power-sub">{subTitle['value']}</div>
                )
              }
            </div>
          </div>
          <div className={`power-right ${clickActive ? 'active' : ''}`} onClick={() => {
            if (!executeValue || clickActive) return;
            const item: any = {
              value: executeValue,
              streamId,
            };
            handler?.(item);
            clearTimeout(timer1);
            clearTimeout(timer2);
            setClickActive(true);
            timer2 = setTimeout(() => {
              setTextActive(true);
            }, 500)
          }}>
            <span className='power-btn'>执行
              {
                clickActive && (
                  <span className={`power-btn-span ${textActive ? 'animation' : 'stop'} `}>执行</span>
                )
              }
            </span>
          </div>
          {disabled && (
            <div className="power-disable"></div>
          )}
        </div>
        {/* {getContent()}
        <IconButton icon={btnIcon ?? 'insideicon-cu-1'} /> */}
      </div>
    </>
  );
};

export default IOTExecutePower;