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

const prefixCls = 'iot-power-out';

const IOTPower: React.FC<iIOTPowerProps> = ({
  title,
  streamId,
  curValue,
  subTitle,
  icon,
  btnIcon,
  disabled,
  streamName,
  handler,
  ...rest
}) => {
  // const [checked, setchecked] = useState(true);
  // const getIcon = () => {
  //   if (icon?.show) {
  //     return <NormalIcon url={icon?.value ? icon.value : 'insideicon-cu-1'} />;
  //   }
  //   return <div></div>;
  // };

  // const getContent = () => {
  //   return (
  //     <div className="iot-power-content">
  //       {getIcon()}
  //       <div className="title-wrap">
  //         <div className="title">{title}</div>
  //         {subTitle?.show ? <div className="subTitle">{subTitle.value}</div> : undefined}
  //       </div>
  //     </div>
  //   );
  // };

  // let height = '84px';
  // if (icon?.show === false || subTitle?.show === false) {
  //   height = '60px';
  // }
 
  return (
    <>
      <div className={prefixCls} {...rest}>
        <div className={`iot-power ${rest.source}`}>
          <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" onClick={() => {
            const item: any = {
              value: !curValue,
              streamId,
            };
            handler?.(item);
          }}>
            <div className={['power-btn-icon ', curValue ? 'power-btn-icon-on' : 'power-btn-icon-off'].join(' ')}>
              <span className={['power-btn-image', btnIcon? btnIcon :'insideicon-power'].join(' ')}></span>
            </div>
          </div>
          {disabled && (
            <div className="power-disable"></div>
          )}
        </div>
        {/* {getContent()}
        <IconButton icon={btnIcon ?? 'insideicon-cu-1'} /> */}
      </div>
    </>
  );
};

export default IOTPower;