import React, { useState, useEffect } from 'react';
import { IOTImgProps } from './interface';

import './style/index.less';


const prefixCls = 'iot-element-img';
const defaultImg = 'https://smartoss.tsy.spic.com.cn/smart-lowcode/static/img/image_empty.svg';

const pxToRem = (value: string, imgSrc: string) => {
  if (!imgSrc) return;
  if (!value) return;
  return Number.parseInt(value) / 100 + 'rem';
}

const IOTImg: React.FC<IOTImgProps> = ({
  streamId,
  icon,
  title,
  subTitle,
  disabled = false,
  imgSrc,
	width,
	height,
  handler = (val: any) => { },
  ...rest
}) => {
  const [imgUrl, setImgUrl] = useState(imgSrc);

  useEffect(() => {
    setImgUrl(imgSrc);
  }, [imgSrc])

  return (
    <div
      style={{ width: pxToRem(width, imgUrl), height: pxToRem(height, imgUrl) }}
      className={prefixCls}
      {...rest}
    >
      <div className={`${prefixCls}-box`}>
        <div
          className="default-img"
          style={{
            backgroundImage: `url(${imgUrl || defaultImg})`,
						backgroundRepeat:'no-repeat',
						backgroundPosition:'center',
            backgroundSize: 'contain',
          }}
        ></div>
      </div>
    </div>
  );
};

export default IOTImg;