import React, { useEffect, useState } from 'react';
import { IOTConsumablesProps, currentValueType } from './interface';
import './style/index.less';
const prefixCls = 'iot-cord-entry-enum-out';



const typeList: any = {
  [currentValueType.normal]: {
    status: currentValueType.normal,
    text: '正常'
  },
  [currentValueType.error]: {
    status: currentValueType.error,
    text: '已过期'
  },
  [currentValueType.warning]: {
    status: currentValueType.warning,
    text: '即将过期'
  }
}


const IOTConsumables: React.FC<IOTConsumablesProps> = ({
  streamId,
  icon,
  title,
  subTitle,
  consumablesList,
  thumbnailTheme1,
  thumbnailTheme12,
  disabled = false,
  streamValue,
  handler = () => { },
  childrenIcon = false,
  ...rest
}) => {
  const [currentValue, setcurrentValue] = useState(typeList[currentValueType.normal]);

  useEffect(() => {
    let value: any = typeList[currentValueType.normal]
    if (streamValue > 10) {
      value = typeList[currentValueType.normal]
    } else if (streamValue < 1) {
      value = typeList[currentValueType.error]
    } else {
      value = typeList[currentValueType.warning]
    }
    setcurrentValue(value)
  }, [streamValue])

  return (
    <>
      <div className={prefixCls}  onClick={() => {
        handler()
      }} {...rest}>
        <div className='iot-cord-entry-enum'>
          <div className='cord-entry-enum-left'>
            {
              icon?.show && (
                <div className="cord-entry-enum-icon">
                  <span className={['cord-entry-enum-icon-image', icon?.value ? icon.value : 'insideicon-cu-1'].join(' ')}></span>
                </div>
              )
            }
            <div className="cord-entry-enum-title" style={{ marginLeft: icon?.show ? '0' : '.2rem' }} >
              <div className="cord-entry-enum-main" >{title}</div>
              {
                subTitle?.show && (
                  <div className={`cord-entry-enum-sub ${currentValue.status === 'warning' ? 'warning' : currentValue.status === 'error' ? 'error' : ''}`}>{subTitle['value']}{currentValue.text}</div>
                )
              }
            </div>
          </div>
          <div className="cord-entry-enum-right" onClick={() => {

          }}>
            <div className='enum-show'>
              <div className='arrow insideicon-entry'></div>
            </div>
          </div>
          {disabled && (
            <div className="cord-entry-enum-disable"></div>
          )}
        </div>
      </div>
    </>
  );
};

export default IOTConsumables;