import React, { useContext, useEffect, useState } from 'react';

import './index.less';
interface IProps {
  middleList: any[][];
  modelFootList: any;
  modelTopList: any;
  styleType: string;
  control: (e: any) => void;
  showIcon?: 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 IOTAllGrid = ({
  middleList,
  modelFootList,
  modelTopList,
  styleType,
  control,
  showIcon = false
}: IProps) => {
  useEffect(() => {
    // console.log(modelFootList, 'modelFootList')
  }, [modelFootList]);

  const itemGrid = (item: any, index: number, modelFootList: any) => {
    return <div
      className={['gird-all-item', styleType !== '1' ? 'gird-all-item-ellipse' : '', item['checked'] ? 'active-all' : ''].join(' ')}
      onClick={() => {
        if (item.value === null || item['disabled']) return;
        control(item);
      }}
      key={index}
    >
      {
        showIcon && item.icon && (
          <div className={`icons-ellipse-box ${item?.checked ? 'icon-box-active' : ''}`}>
            <i className={`icons-ellipse ${item.icon}`} />
          </div>
        )
      }
      <div className={`text ${styleType !== '1' && modelFootList.length > 3 ? 'text-ellipse' : ''}`}>{item.text}</div>
      {
        item['disabled'] && (<div className='item-disabled' >
        </div>)
      }
    </div>

  }
  return (
    <div className="iot-grid-all-item-list">
      {
        styleType !== '1' && <div className='gird-ellipse-item-line' ></div>
      }
      {modelTopList.length > 0 && (
        <div className={`gird-all-item-top ${styleType !== '1' ? 'gird-all-item-top-ellipse' : ''}`} style={getItem(modelTopList.length)}>
          {modelTopList.map((item: any, index: number) => {
            return (
              <div
                className={['gird-all-item', styleType !== '1' ? 'gird-all-item-ellipse' : '', item['checked'] ? 'active-all' : ''].join(' ')}
                onClick={() => {
                  if (item['disabled']) return;
                  control(item);
                }}
                key={index}
              >
                {
                  showIcon && item.icon && (
                    <div className={`icons-ellipse-box ${item?.checked ? 'icon-box-active' : ''}`}>
                      <i className={`icons-ellipse ${item.icon}`} />
                    </div>
                  )
                }
                <div className={`text ${styleType !== '1' && modelTopList.length > 3 ? 'text-ellipse' : ''}`}>{item.text}</div>
                {
                  item['disabled'] && (<div className='item-disabled' >
                  </div>)
                }
              </div>
            );
          })}

        </div>
      )}
      {middleList.length > 0 && (
        <div>
          {middleList.map((out: any, ind: number) => {
            return (
              <div key={`m-out-${ind}`}>
                {/* {
                  styleType === '1' && <div className='gird-all-item-line' key={`line-m-${ind}`} ></div>
                } */}
                <div className={`gird-all-item-top ${styleType !== '1' ? 'gird-all-item-top-ellipse' : ''}`} key={`middle-${ind}`} style={getItem(out.length)} >
                  {out.map((item: any, ins: number) => {
                    return (
                      <div
                        className={['gird-all-item', styleType !== '1' ? 'gird-all-item-ellipse' : '', item['checked'] ? 'active-all' : ''].join(' ')}
                        onClick={() => {
                          if (item['disabled']) return;

                          control(item);

                        }}
                        key={`middle-items-${ins}`}
                      >
                        {
                          item['disabled'] && (<div className='item-disabled' >
                          </div>)
                        }
                        {
                          showIcon && item.icon && (
                            <div className={`icons-ellipse-box ${item?.checked ? 'icon-box-active' : ''}`}>
                              <i className={`icons-ellipse ${item.icon}`} />
                            </div>
                          )
                        }
                        <div className={`text ${styleType !== '1' && middleList.length > 3 ? 'text-ellipse' : ''}`}>{item.text}</div>
                      </div>
                    );
                  })}
                </div>
              </div>

            );
          })}
        </div>
      )}
      {modelFootList.length > 0 && (
        <>
          {/* {
            styleType === '1' && <div className='gird-all-item-line' ></div>
          } */}
          <div className={`gird-all-item-top ${styleType !== '1' ? 'gird-all-item-top-ellipse' : ''}`} style={getItem(modelFootList.length)}>
            {modelFootList.map((item: any, index: number) => {
              return (
                styleType === '1' ? itemGrid(item, index, modelFootList) : item.text && itemGrid(item, index, modelFootList)
              );
            })}
          </div>
        </>
      )}
      {
        styleType === '1' && <div className='gird-all-item-out-line'></div>
      }
    </div>
  );
};

export default IOTAllGrid;