import React, { useEffect, useState } from 'react';
import { IOTCordEntryEnumProps } from './interface';
import IOTBottomSlide from '../../common/IOTBottomSlide/index'

import './style/index.less';
import IOTAllGrid from '../IOTAllGrid';
const prefixCls = 'iot-cord-entry-enum-out';

const IOTCordEntryenum: React.FC<IOTCordEntryEnumProps> = ({
  streamId,
  icon,
  title,
  subTitle,
  disabled = false,
  items,
  handler = (val: any) => { },
  childrenIcon = false,
  ...rest
}) => {
  const [currentValue, setcurrentValue] = useState('');
  const [currValue, setcurValue] = useState({});
  const [btmBarType, setBtmBarType] = useState('show'); // com // show

  const [btm, setBtm] = useState(false);
  const onChange = (value: any) => {
    setcurrentValue(value);
    // console.log(value);
  };
  const [middleList, setMiddleList] = useState<Array<Array<any>>>([]);
  const [modelTopList, setModelTopList] = useState<any>([]);
  const [modelFootList, setModelFootList] = useState<any>([]);
  useEffect(() => {
    if (items.length > 0) {
      if (items.length > 0 && items.length <= 4) {
        setModelTopList([...items]);
      } else 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);
        }
        setModelTopList([...topArr])
        setModelFootList([...footArr])
      } else 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);
        setMiddleList(middle);
        setModelTopList([...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]);
      }
    }
  }, [items]);




  useEffect(() => {
    if (items) {
      items.map((item: any) => {
        if (item['checked']) {
          setcurrentValue(item['text'])
        }
      })
    }
  }, [items])
  return (
    <>
      <div className={prefixCls} {...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">{subTitle['value']}</div>
                )
              }
            </div>
          </div>
          <div className="cord-entry-enum-right" onClick={() => {

          }}>
            <div className='enum-show' onClick={() => {
              setBtm(true);
            }}>
              <div className='cord-entry-enum-text'>{currentValue}</div><div className='arrow insideicon-entry'></div>

            </div>
          </div>
          {disabled && (
            <div className="cord-entry-enum-disable"></div>
          )}
        </div>
      </div>
      <IOTBottomSlide isShow={btm}
        confirmHandler={(val: any) => {
          // console.log(val);
          setTimeout(() => {
            const bodyDom = document.querySelectorAll('body') as NodeListOf<HTMLElement>;
            bodyDom[0].style.overflow = 'auto';
            setBtm(false);
          }, 500);
        }}
        leftText={`更多${title}`} rightText='取消' type={btmBarType} title={title}>
        <IOTAllGrid
          modelTopList={modelTopList}
          middleList={middleList}
          modelFootList={modelFootList}
					styleType='1'
          control={(val: any) => {
            handler(val);
            setTimeout(() => {
              const bodyDom = document.querySelectorAll('body') as NodeListOf<HTMLElement>;
              bodyDom[0].style.overflow = 'auto';
              setBtm(false);
            }, 500);
          }}
        />
      </IOTBottomSlide>
    </>
  );
};

export default IOTCordEntryenum;