import React, { useState, useEffect, useCallback } from 'react';
import { FormattedMessage } from 'umi';

import SearchInput from '@/components/SearchInput';
import PageHeader from '@/components/PageHeader';
import Map from '@/components/map';
import TopNavigator from '@/components/topNavigator';
import TopNavRight from './components/topNavRight';
import DeviceModal from './components/deviceModal';

import styles from './index.less';
import mapstyles from '@/assets/css/map.less';

// import './map.less';
import { equipImageMap } from '@/config/image.js';
import { Input } from 'antd';
import Icon from '@/tenants-ui/Icon';
import type { navigatorItem } from '@/pages/Environment/index';

//import { getMapList } from '@/services/ant-design-pro/environment';

const Environment: React.FC = () => {
  const { envir_all, equip_air, equip_lamp, envir_curtain } = equipImageMap;

  const [searchText, setSearchText] = useState<{ text: any }>();
  const [showModal, setShowModal] = useState<boolean>(false);
  const [navigatorList] = useState<navigatorItem[]>([
    {
      name: '全部设备',
      id: 'all',
      src: envir_all,
      //color: '#E5574F',
      color: '#E89E32',
      colorStr: '',
    },
    {
      name: '空调',
      id: 'airConditioner',
      src: equip_air,
      num: 11,
      color: '#5E8BCF',
      colorStr: '94,139,207,',
    },
    {
      name: '照明',
      id: 'lamp',
      src: equip_lamp,
      num: 10,
      color: '#FFE823',
      colorStr: '255,232,35,',
    },
    {
      name: '窗帘',
      id: 'curtain',
      src: envir_curtain,
      num: 50,
      color: '#E89E32',
      colorStr: '232, 158, 50,',
    },
  ]);
  //   const [mapList, setMapList] = useState<API.MapInfo[]>([]);
  //   useEffect(() => {
  //     getMapList({ floorId: 'sffsdfdsfdf', floorNumber: 22 }).then(function (res) {
  //       var data: API.MapInfo[] = res.data || [];
  //       data.forEach((item, index) => {});
  //       setMapList(data);
  //     });
  //   }, []);
  const [selNav, setSelNav] = useState<navigatorItem>(navigatorList[0]);
  const [selFloorId, setSelFloorId] = useState<string>();
  const changeFloorId = (data: string) => {
    //debugger;
    setSelFloorId(data);
  };
  const navigatorChange = (item: navigatorItem) => {
    //debugger;
    if (item.id == 'all') {
    }
    if (item.id == 'airConditioner') {
    }
    if (item.id == 'lamp') {
    }
    setSelNav(item);
  };
  const showModalClick = () => {
    console.log('showChart');
    setShowModal(true);
  };
  //当前设备的状态 all全部开启 part部分开启 close全都关闭  还有类型type 包括airConditioner lamp curtain
  //根据设备状态返回不同的 颜色
  const getColorOpacity = (value: string, type?: string): string => {
    //debugger;
    let colorStr = '';
    if (selNav.id == 'all') {
      //全部设备时 colorStr赋值
      var filterRes = navigatorList.filter(function (item) {
        return item.id == type;
      });
      colorStr = (filterRes[0] || {}).colorStr;
    } else {
      colorStr = selNav.colorStr;
    }
    if (value == 'part') {
      return 'rgba(' + colorStr + '0.4)';
    } else if (value == 'all') {
      return 'rgba(' + colorStr + '1)';
    } else {
      return 'rgba(196, 196, 196, 0.6)';
    }
  };
  return (
    <>
      <PageHeader
        title={<FormattedMessage id="menu.equipment" />}
        action={
          <SearchInput
            onSearch={(s) => {
              setSearchText({ text: s });
            }}
          />
        }
      />
      <TopNavigator
        navigatorList={navigatorList}
        type={'equipment'}
        navigatorChange={navigatorChange}
        action={<TopNavRight selNavObj={selNav} navigatorList={navigatorList}></TopNavRight>}
        changeFloorId={changeFloorId}
      ></TopNavigator>
      <div className={styles.maptop}>
        {selNav.id !== 'all' && (
          <div className={styles.right}>
            <div>
              <span
                className={styles.circle}
                style={{ backgroundColor: 'rgba(' + selNav.colorStr + '1)' }}
              ></span>
              <span>开启</span>
            </div>
            <div>
              <span
                className={styles.circle}
                style={{ backgroundColor: 'rgba(' + selNav.colorStr + '0.4)' }}
              ></span>
              <span>部分开启</span>
            </div>
            <div>
              <span
                className={styles.circle}
                style={{ backgroundColor: 'rgba(196, 196, 196, 0.6)' }}
              ></span>
              <span>关闭</span>
            </div>
          </div>
        )}
      </div>
      <Map
        searchText={searchText}
        selFloorId={selFloorId}
        type={'equipment'}
        render={(item, index) => {
          return (
            <div
              key={index + 'house'}
              className={mapstyles.house}
              style={{
                left: item.left,
                top: item.top,
                width: item.width,
                height: item.height,
                backgroundColor:
                  selNav.id == 'all'
                    ? 'rgba(196, 196, 196, 0.2)'
                    : getColorOpacity(item[selNav.id]),
              }}
            >
              {selNav.id == 'all' && (
                <div className={mapstyles.allDevice}>
                  {/* 所有设备的图标列表 */}
                  {(item.device || []).map((ditem, dindex: number) => {
                    return (
                      <div
                        key={dindex + 'device'}
                        className={mapstyles.icon}
                        style={{
                          backgroundColor: getColorOpacity(ditem.status, ditem.type),
                        }}
                      >
                        <Icon className="" type={ditem.type} style={{ color: '#ffffff' }}></Icon>
                      </div>
                    );
                  })}
                </div>
              )}
              <div className={mapstyles.showModal} onClick={showModalClick}>
                <Icon className="" type="hover"></Icon>
              </div>
              <div className={mapstyles.content}>
                <Icon className="" type={item.roomFuncType} style={{ fontSize: 20 }}></Icon>
                <div className={mapstyles.name}>{item.localName}</div>
              </div>
            </div>
          );
        }}
      ></Map>
      {showModal && (
        <DeviceModal
          onClose={() => {
            setShowModal(true);
          }}
        ></DeviceModal>
      )}
    </>
  );
};

export default Environment;
