import IOTAllGrid from '../../enum/IOTAllGrid';
import IOTNumberSlider from "../../number/IOTCordEntryNumber/IOTNumberSlider";
import { dataSource } from "../../number/sliderConfig";
import React, { useEffect, useRef, useState } from 'react';
import IOTBottomSlide from '../IOTBottomSlide';
import { EnumItems, NavigationEnumProps, NavigationLinkProps, NavigationNumberProps, NumberSlideType } from './interface';

import './style/index.less';

type ItemType =  NavigationEnumProps & NavigationLinkProps &NavigationNumberProps ;

const IOTIconNavigation: React.FC<any> = (props) => {
  const {list,source,disabled} = props;
  const [select,setSelect] = useState(-1);
  const [btm,setBtm] = useState(false);
  const [title,setTitle] = useState('')
  const boolRef = useRef(false);

  // 枚举
  const [middleList, setMiddleList] = useState<Array<Array<any>>>([]);
  const [modelTopList, setModelTopList] = useState<any>([]);
  const [modelFootList, setModelFootList] = useState<any>([]);
  // number
  const [numberSlider,setNumberSlider] = useState<NumberSlideType>({
    streamId:'string',
    max: "255.0",
    min: "0.0",
    step: "1",
    unit:'℃',
    unitdesc:'摄氏度',
    curValue:'',
    intType:''
  })
  const sliderVal = useRef(0);

  const [type,setType] = useState('enum');
  const handlerRef = useRef((e:any)=>{})

  const click = (item:ItemType,index:number)=>{
    // 置灰点击不可用
    if(item.disabled)return;
    if(item?.handler){
      handlerRef.current = item?.handler
    }else{
      handlerRef.current =()=>{};
    }
    setType(item.type || 'enum')
    switch (item.type) {
      case 'bool':
        const obj = {
          streamId:item.streamId,
          value:!item.curValue
        }
        item.handler&&item.handler(obj);
        break;
      case 'number':
        const sliderItem = {
          streamId:item.streamId,
          max:item.max,
          min: item.min,
          step: item.step,
          unit:item.unit,
          unitdesc:item.unitdesc,
          curValue:item.curValue || item.min,
          intType:item.intType
        }
        setNumberSlider(sliderItem)
        setTitle(item.title || '')
        setBtm(true)
        break;
      case 'enum':
        const {items,curValue} = item;
        if (items.length > 0) {
          items.map((currentItem:any)=>{
            if(currentItem.value === curValue) {
              currentItem.checked = true
            }
          })
          // if( items[curValue] &&'checked' in items[curValue]){
          //   items[curValue].checked = true;
          // }
          modelTopList?.length && setModelTopList([]);
          middleList?.length && setMiddleList([])
          modelFootList?.length && setModelFootList([])
          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;
            if (m > 0) {
              n = n + 1 - 2;
            } else {
              n = n - 2;
            }
            const arr = items.slice(4, l - m);
            const middle = [];
            for (let i = 0; i < n; i++) {
              const item = arr.slice(i * 4, i * 4 + 4);
              middle.push(item);
            }
            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 = [];
            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]);
          }
        }
        setTitle(item.title || '')
        setBtm(true)
        break;
      default:
        item.handler&&item.handler()
        setSelect(index);
        boolRef.current = false;
        break;
    }
  }
  let bottomSliderProps = {
      leftText:title,
      rightText:'取消',
     type:'show', 
     title:title,
     confirmHandler:(val: any) => {
      setTimeout(() => {
        const bodyDom = document.querySelectorAll('body') as NodeListOf<HTMLElement>;
        bodyDom[0].style.overflow = 'auto';
        setBtm(false);
      }, 500)
    }
  }
  if(type === 'number'){
    bottomSliderProps = {
      leftText:'取消',
      rightText:'确定',
      type:'com', 
      title:title,
      confirmHandler:(val: any) => {
        if(val){
          const item = {
            streamId:numberSlider.streamId,
            value: sliderVal.current,
          };
          console.log(item)
          handlerRef.current&&handlerRef.current(item)
        }
        setBtm(false);
      }
    }
  }
  const len = list?.length ?? 0;
  return (
    <>
      <div className="iot-navigation-out">
        <div className={`iot-navigation ${source}`} style={len>4?{justifyContent:'flex-start'}:{}}>
          {list?.map((item: ItemType,index:number)=>{
            if(!item)return<></>
            let light = select === index;
            if(item.type === 'bool'){
              light = item.curValue
            }
            return (
              <div className='iot-navigation-content' style={len>4?{marginBottom:'0.1rem'}:{}} key={`${item.title}-${index}`}>
                <div className={`navigation-entry-enum-icon ${light?'active':'default'}`} onClick={click.bind(this,item,index)}>
                  <span className={['navigation-entry-enum-icon-image', item?.icon??'insideicon-cu-1'].join(' ')}></span>
                </div>
                <p>{item.title}</p>
                {item.disabled?<div className='disabled'/>:null}
              </div>
            )
          })}
        </div>
      </div>
      <IOTBottomSlide isShow={btm} {...bottomSliderProps}>
        {type === 'enum'?
          (<IOTAllGrid
            modelTopList={modelTopList}
            middleList={middleList}
            modelFootList={modelFootList}
            styleType='1'
            control={(val: any) => {
              handlerRef.current&&handlerRef.current(val)
              setTimeout(() => {
                const bodyDom = document.querySelectorAll('body') as NodeListOf<HTMLElement>;
                bodyDom[0].style.overflow = 'auto';
                setBtm(false);
              }, 500);
            }}
          />)
          :
        (<IOTNumberSlider
            min={Number.parseFloat(numberSlider.min)}
            max={Number.parseFloat(numberSlider.max)}
            step={Number.parseFloat(numberSlider.step)}
            intType={numberSlider.intType}
            unit={numberSlider.unit}
            isStep={numberSlider.step === '1' &&(Math.round((Number.parseFloat(numberSlider.max) - Number.parseFloat(numberSlider.min)) / Number.parseFloat(numberSlider.step)) >50) }
            showHandleBtn={false}
            curValue={numberSlider.curValue +''}
            dotsData={dataSource(numberSlider.min, numberSlider.max, numberSlider.step)}
            disabled={false}
            onchange={(val: any) => {sliderVal.current = val}}
            move={(val: any) => {}}
            start={() => {}}
          />)
        }
      </IOTBottomSlide>
    </>
  );
};

export default IOTIconNavigation;