import React, { useState } from 'react';
import { IOTSwitchProps } from './interface';
import './style/index.less';
const prefixCls = 'iot-switch-out';
import NormalIcon from '../../base/normalIcon';

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

  //     );
  //   }
  //   return undefined;
  // };

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

  //     </>
  //   );
  // };

  return (
    <>
      <div className={prefixCls} {...rest}>
        <div className="iot-switch">
          <div className="switch-left">
            {
              icon?.show && (
                <div className="switch-icon">
                  <span className={['switch-icon-image', icon?.value ? icon.value : 'insideicon-cu-1'].join(' ')}></span>
                </div>
              )
            }

            <div className="switch-title" style={{ marginLeft: icon?.show ? '0' : '.2rem' }}>
              <div className="switch-main">{ title }</div>
              {
                subTitle?.show && (
                  <div className="switch-sub">{ subTitle['value']}</div>
                )
              }
            </div>
          </div>
          <div className="switch-right" onClick={() => {
            const item: any = {
              value: !curValue,
              streamId,
            };
            handler(item);
          }}>
            <div className={['switch-btn', curValue ? 'switch-btn-on' : 'switch-btn-off'].join(' ')}>
              <span className="switch-ball"></span>
            </div>
          </div>
          {disabled && (
            <div className="switch-disable"></div>
          )}
        </div>
        {/* {getContent()}
        <div className="iot-item-right">
           <div
          className={['item-right', curValue ? 'open-style' : 'close-style'].join(' ')}
          onClick={() => {
            const item = {
              value: !curValue,
              streamId,
            };
            handler(item);
          }}
        >
          <div className="ball"></div>
        </div>
        </div>

        <div
          className="disabled-pangle"
          style={{ display: `${disabled ? 'block' : 'none'}` }}
        ></div> */}
      </div>
    </>
  );
};

export default IOTSwitch;