import React, { useState, useEffect, useCallback } from 'react';
import { FormattedMessage } from 'umi';
import PageHeader from '@/components/PageHeader';
// import SearchInput from '@/tenants-ui/SearchInput';
import TopNavigator from './components/topNavigator';
import ChartModal from './components/chartModal';
import { equipImageMap } from '@/config/image.js';
import { Input } from 'antd';

import styles from './index.less';

export default function Environment() {
  const {
    temperMapTop,
    co2MapTop,
    maptemp1,
    maptemp2,
    envir_temperature,
    envir_wet,
    envir_co2,
    envir_pm25,
    envir_jiaquan,
    envir_tvoc,
  } = equipImageMap;

  const [searchText, setSearchText] = useState();
  const [showChart, setShowChart] = useState(false);
  const [explainImg, setExplainImg] = useState(temperMapTop);
  const [mapImg, setMapImg] = useState(maptemp1);

  const [navigatorList] = useState([
    {
      name: '温度',
      id: 'temperature',
      src: envir_temperature,
      sel: false,
      unit: '℃',
      num: 24.3,
      color: '#E5574F',
    },
    {
      name: '湿度',
      id: 'wet',
      src: envir_wet,
      sel: false,
      unit: '%',
      num: 70,
      color: '#9FB7CD',
    },
    {
      name: 'CO₂',
      id: 'co2',
      src: envir_co2,
      sel: false,
      unit: 'ppm',
      num: 600,
      color: '#00DC23',
    },
    {
      name: 'PM2.5',
      id: 'pm25',
      src: envir_pm25,
      sel: false,
      unit: 'ug/m³',
      num: 33,
      color: '#E89E32',
    },
    {
      name: '甲醛',
      id: 'jiaquan',
      src: envir_jiaquan,
      sel: false,
      unit: 'mg/m³',
      num: 50,
      color: '#140050',
    },
    {
      name: 'TVOC',
      id: 'tvoc',
      src: envir_tvoc,
      sel: false,
      unit: 'mg/m³',
      num: 36,
      color: '#2D553E',
    },
  ]);
  const navigatorChange = (item) => {
    if (item.id == 'temperature') {
      setExplainImg(temperMapTop);
      setMapImg(maptemp1);
    }
    if (item.id == 'co2') {
      setExplainImg(co2MapTop);
      setMapImg(maptemp2);
    }
  };
  const specialRoomClick = () => {
    console.log('showChart');
    setShowChart(true);
  };
  return (
    <div>
      <PageHeader
        title={<FormattedMessage id="menu.environment" />}
        action={
          //   <SearchInput
          //     placeholder="搜索空间"
          //     onSearch={(s) => {
          //       setSearchText(s || undefined);
          //     }}
          //     onCancel={() => {
          //       setSearchText();
          //     }}
          //   />

          <Input.Search
            size="large"
            allowClear
            style={{ width: '20%' }}
            placeholder={'搜索空间'}
            onSearch={(s) => {
              setSearchText(s || undefined);
            }}
          />
        }
      />
      <div style={{ marginTop: '26px' }}>
        <TopNavigator
          navigatorList={navigatorList}
          type={'enviroment'}
          navigatorChange={navigatorChange}
        ></TopNavigator>
        <div className={styles.mapwrap}>
          <div className={styles.top}>
            <div className={styles.right}>
              <img style={{ width: '100%' }} src={explainImg}></img>
            </div>
          </div>
          <div className={styles.map}>
            <div className={styles.specialRoom} onClick={specialRoomClick}></div>
            <img src={mapImg}></img>
          </div>
        </div>
      </div>

      {showChart && (
        <ChartModal
          onClose={() => {
            setShowChart(false);
          }}
        ></ChartModal>
      )}
    </div>
  );
}
