import React, { useState, useEffect } from 'react';
import { ICardMultiText } from './interface';
import './style/index.less';
import { checkLabelContainTag } from '../../index';
import { isSymbolFormatTime } from './utils';

const prefixCls = 'iot-card-multi-text-out';
const getItem = (len: number) => {
  const itemLen = len;
  const itemWidth = Math.floor((1 / itemLen) * 100) + '%';
  const style = {
    gridTemplateColumns: `repeat(${itemLen}, ${itemWidth})`,
  };
  // console.log(style);
  return style;
};
const IOTCardMultiText: React.FC<ICardMultiText> = ({
  list,
  streamId,
  specs,
  ...rest
}) => {
  const [moreShow, setMoreShow] = useState(false);
  const [allList, setAllList] = useState<Array<Array<any>>>([]);
  const [curList, setCurList] = useState<Array<Array<any>>>([]);
  useEffect(() => {
    const arr = [];
    if (list.length > 0 && list.length <= 3) {
      arr.push(list);
      setCurList(arr);
    } else {
      let len = Math.floor(list.length / 3);
      let sur = list.length % 3;
      if (sur > 0) {
        len = len + 1;
      }
      // console.log(len);
      for (let i = 0; i < len; i++) {
        arr.push(list.slice(i * 3, i * 3 + 3));
      }
      setAllList(arr);
      // setCurList(arr.slice(0, 2));
      if (moreShow) {
        setCurList(arr);
      } else {
        setCurList(arr.slice(0, 2));
      }
    }
  }, [list]);

  useEffect(() => {
    if (allList.length < 2) return;
    if (moreShow) {
      setCurList(allList);
    } else {
      setCurList(allList.slice(0, 2));
    }
  }, [moreShow]);

  const timeConverHandler = ( text: string,items:any) => {
    if (checkLabelContainTag('7', items.label ?? '')) {
      return isSymbolFormatTime(Number.parseInt(text), items.unit || 'min', items.unitConvertFlag);
    } else {
      return text
    }
  }

  return (
    <div className={prefixCls} {...rest}>
      <div className={`${prefixCls + '-box'} ${allList.length > 2 ? 'show-bord':''}`}>
        {curList.map((lists, key) => {
          return (
            <div className="floor" style={getItem(lists.length)} key={key}>
              {lists.map((items, index) => {
                return (
                  <div className="card-items" key={index}>
                    <div className="card-title">{items.title}</div>
                    <div className="card-state-text">{items.text ? timeConverHandler( items.text,items) : '- -'}</div>
                    <div className="card-line"></div>
                  </div>
                );
              })}
            </div>
          );
        })}
      </div>
      {allList.length > 2 && (
        <div
          className="more-card"
          onClick={() => {
            setMoreShow(!moreShow);
          }}
        >

          <div className="more-card-text ">{moreShow ? '收起信息' : '显示更多信息'} </div>
          <div className={`more-card-icon insideicon-entry ${moreShow ? 'show':''}`}></div>

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

export default IOTCardMultiText;