import React, { useState, useEffect } from 'react';
import { IOTIconGridProps } from './interface';
import ModelItem from './ModelItem/ModelItem';
import './style/index.less';
import NormalIcon from '../../base/normalIcon';

const prefixCls = 'iot-icon-grid-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 IOTIconGrid: React.FC<IOTIconGridProps> = ({
  streamId,
  icon,
  title,
  subTitle,
  disabled = false,
  items,
  handler = (val: any) => { },
  childrenIcon = false,
  ...rest
}) => {
  const [moreChoose, setMoreChoose] = useState(false);
  const [moreChooseText, setMoreChooseText] = useState('');

  const [top1List, setTop1List] = useState<any>([]);
  const [topList, setTopList] = useState<any>([]);
  const [middleList, setMiddleList] = useState<Array<Array<any>>>([]);
  const [footList, setFootList] = useState<any>([]);
  const [modelTopList, setModelTopList] = useState<any>([]);
  const [modelFootList, setModelFootList] = useState<any>([]);
  useEffect(() => {
    if (items.length > 0) {
      if (items.length > 0 && items.length <= 4) {
        setTopList([...items]);
        setFootList([]);
        setMoreChoose(false);
      }
      if (items.length > 4 && items.length <= 8) {
        let topArr;
        let footArr;
        if (items.length === 5) {
          topArr = items.slice(0, 3);
          footArr = items.slice(3);
        } else if (items.length === 6) {
          topArr = items.slice(0, 3);
          footArr = items.slice(3);
        } else {
          topArr = items.slice(0, 4);
          footArr = items.slice(4);
        }
        setTopList([...topArr]);
        setFootList([...footArr]);
        setMoreChoose(false);
      }
      if (items.length > 8) {
        const l = items.length;
        let n = Math.floor(l / 4);
        const m = l % 4;
        // console.log(l, 'llll');
        // console.log(m, 'mmmmm');
        if (m > 0) {
          n = n + 1 - 2;
        } else {
          n = n - 2;
        }
        // console.log(n, 'nnnnnn');
        const arr = items.slice(4, l - m);
        // console.log(arr, 'arr');
        const middle = [];
        for (let i = 0; i < n; i++) {
          const item = arr.slice(i * 4, i * 4 + 4);
          // console.log(item, 'arr');
          middle.push(item);
        }
        // console.log(middle, 'middle~~~~');
        const topArr = items.slice(0, 4);
        const footArrMode = m === 0 ? items.slice(l - 4) : items.slice(l - m);
        const footArr = items.slice(4, 8);

        setMiddleList(middle);
        setModelTopList([...topArr]);
        setTopList([...topArr]);
        const mentalist: any = [];
        // console.log(m, 'm========');
        if (m > 0) {
          for (let i = 0; i < 4 - m; i++) {
            const item = {
              value: null,
              text: '',
              icon: '',
              checked: false,
            };
            mentalist.push(item);
          }
        }

        setModelFootList([...footArrMode, ...mentalist]);
        setFootList([...footArr]);
        const list = items.slice(0, 8);
        let flag = false;
        let text = '';
        items.map((item: any) => {
          if (item.checked) {
            text = item.text;
          }
        });
        if (text !== '') {
          list.map((item: any) => {
            if (item.checked) {
              flag = true;
            }
          });
          setMoreChoose(!flag);
        } else {
          setMoreChoose(false);
        }
        setMoreChooseText(text);
      }
    }
  }, [items]);

  return (
    <div className={prefixCls} {...rest}>
      <div className='iot-icon-grid'>
        <div className='iot-icon-grid-top'>
          <div className='iot-icon-grid-left'>
            {
              icon?.show && (
                <div className="iot-grid-icon">
                  <span className={['iot-grid-icon-image', icon?.value ? icon.value : 'insideicon-cu-1'].join(' ')}></span>
                </div>
              )
            }
            <div className="iot-grid-title" style={{ marginLeft: icon?.show ? '0' : '.2rem' }} >
              <div className="iot-grid-main" style={{marginRight:moreChoose?'0':'var(--operation-margin-LR)'}}>{title}</div>
              {/* {
            subTitle?.show && (
              <div className="iot-grid-sub">{subTitle['value']}</div>
            )
          } */}
            </div>

          </div>
          <div className='iot-icon-grid-right' style={{ display: `${moreChoose ? 'inline-block' : 'none'}` }}>
            <div className='iot-grid-more-title' >已选择: {moreChooseText}</div>
          </div>
        </div>
        <div className="item-list">
          <ModelItem
            title={title}
            // top1List={top1List}
            topList={topList}
            modelTopList={modelTopList}
            footList={footList}
            middleList={middleList}
            showMore={items.length > 8}
            modelFootList={modelFootList}
            control={(val: any) => {
              val['streamId'] = streamId;
              handler?.(val);
            }}
          />
        </div>
        <div className="disabled-pangle" style={{ display: `${disabled ? 'block' : 'none'}` }}></div>
      </div>





    </div>
  );
};

export default IOTIconGrid;