import React, { useState,useEffect } from 'react';
import { IMiniCardText,Item } from './interface';
import './style/index.less';
import { checkLabelContainTag } from '../../index';
import { isSymbolFormatTime } from '../IOTCardMultiText/utils';
const prefixCls = 'iot-mini-card-text';


const IOTMiniCardText: React.FC<IMiniCardText> = ({ list,streamId, specs, ...rest }) => {

  const [curList, setCurList] = useState<Array<any>>(list);
  const timeConverHandler = ( text: string,items:Item) => {
    if (checkLabelContainTag('7', items.label ?? '')) {
      return isSymbolFormatTime(Number.parseInt(text), items.unit || 'min', items.unitConvertFlag);
    } else {
      return text
    }
  }

  useEffect(()=>{
    setCurList(list)
  },[list])

  return (
    <div className={prefixCls} {...rest}>
      {curList.map((items: any, index: number) => {
        return (
          <div className='card-items' key={index}>
            <div className={`card-title ${curList.length > 1 ? 'card-double-title' : ''}`}>{items.title}</div>
            <div className={`card-state-text  ${curList.length > 1 ? 'card-doubel-state-text' : ''}`} >{items.text ? timeConverHandler( items.text,items) : '- -'}</div>
          </div>
        );
      })}
    </div>
  );
};

export default IOTMiniCardText;