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

const IOTEntry: React.FC<IOTEntryProps> = ({
  streamId,
  subTitle,
  title,
  curValue,
  disabled = false,
  icon,
  serviceName,
  serviceAddress,
  handler = (val: any) => {},
  ...rest
}) => {

  return (
    <div className="iot-switch" onClick={()=>{handler&&handler('')}}>
      <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">
        <i className={['switch-btn', 'insideicon-entry'].join(' ')}/>
      </div>
    </div>
  );
};

export default IOTEntry;