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

import './ModelItem.less';

interface IProps {
  title?: string;
  // top1List: any;
  topList: any;
  middleList: any[][];
  footList: any;
  modelFootList: any;
  modelTopList: any;
  showMore: boolean;
  control: (e: any) => void;
  iconShow?: boolean;
}
const getItem = (len: number) => {
  const itemLen = len;
  const itemWidth = Math.floor((1 / itemLen) * 1000) / 10 + '%';
  const style = {
    gridTemplateColumns: `repeat(${itemLen}, ${itemWidth})`,
  };
  return style;
};
const ModelItem = ({
  title,
  // top1List,
  topList,
  middleList,
  footList,
  modelFootList,
  modelTopList,
  showMore,
  control,
  iconShow = false,
}: IProps) => {
  const [btm, setBtm] = useState(false);
  const [btmBarType, setBtmBarType] = useState('show');
  // console.log(footList, modelFootList, modelTopList)
  return (
    <div className="iot-grid-icon-list">
      {topList.length <= 4 && (
        <div className={`gird-item-top`} style={getItem(topList.length)}>
          {topList.map((item: any, index: number) => {
            return (
              <div
                className={['gird-item', item['checked'] ? 'active' : ''].join(' ')}
                onClick={() => {
                  if (item['disabled']) return;

                  control(item);
                }}
                key={index}
              >
                  <div className={`icons-ellipse-box ${item?.checked ? 'icon-box-active' : ''}`}>
                  <i className={`icons-ellipse ${item.icon}`} />
                </div>

                <div className={`text ${topList.length > 3 ? 'text-ellipse' : ''}`}>{item.text}</div>
                {
                  item['disabled'] && (<div className='item-i-disabled' >
                  </div>)
                }
              </div>
            );
          })}
        </div>
      )}
      {footList.length > 0 && (
        <>
          {/* <div className='item-line'></div> */}
          <div className={`gird-item-top`} style={getItem(footList.length)}>
            {footList.map((item: any, index: number) => {
              return (
                <div
                  className={['gird-item', item['checked'] ? 'active' : ''].join(' ')}
                  onClick={() => {
                    if (item.value === null || item['disabled']) return;
                    control(item);
                  }}
                  key={index}
                >
                  <div className={`icons-ellipse-box ${item?.checked ? 'icon-box-active' : ''}`}>
                    <i className={`icons-ellipse ${item.icon}`} />
                  </div>
                  <div className={`text ${footList.length > 3 ? 'text-ellipse' : ''}`}>{item.text}</div>
                  {
                    item['disabled'] && (<div className='item-i-disabled' >
                    </div>)
                  }
                </div>
              );
            })}
          </div>
        </>

      )}
      {
        showMore && <div className='item-ellipse-line-bottom'></div>
      }
      {showMore && (
        <div
          className={`more-btn`}
          onClick={() => {
            const bodyDom = document.querySelectorAll('body') as NodeListOf<HTMLElement>;
            bodyDom[0].style.overflow = 'hidden';
            setBtm(true);
          }}
        >
          <div className='more-title'>更多设置</div>  <div className="icon insideicon-entry"></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'
          showIcon
          control={(val: any) => {
            control(val);
            setTimeout(() => {
              const bodyDom = document.querySelectorAll('body') as NodeListOf<HTMLElement>;
              bodyDom[0].style.overflow = 'auto';
              setBtm(false);
            }, 500);
          }}
        />
      </IOTBottomSlide>
    </div>
  );
};

export default ModelItem;