import React, { useState, useEffect } from 'react';
import { IOTBottomProps } from './interface';
import './style/index.less';
const prefixCls = 'iot-suction-bottom';
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 IOTSuctionBottom: React.FC<IOTBottomProps> = ({ id, list, handler, ...rest }) => {
  return (
    <div className={prefixCls} {...rest}>
      <div className="GridItem" style={getItem(list.length)} >
        {list.map((item: any, index: number) => {
          return (
            <div
              className={['gird-item', item['checked'] ? 'active' : ''].join(' ')}
              onClick={() => {
                if (item['disable']) return;
                handler(item);
              }}
              key={index}
              style={{ position: 'relative' }}
            >
              <div className={['icon-item', item['checked'] ? 'active' : ''].join(' ')}>
                <div className={`icon ${item.icon}`}></div>
              </div>
              { item.textShow && (
                 <div className={['text', item['checked'] ? 'text-active' : ''].join(' ')}>
                {item.text}
              </div>
              )

              }

              <div
                className="disabled-pangle"
                style={{ display: `${item['disable'] ? 'block' : 'none'}` }}
              ></div>
            </div>
          );
        })}
      </div>
    </div>
  );
};

export default IOTSuctionBottom;