import React, { useState, useEffect } from 'react';
import { connect } from 'react-redux';
import Weather from './public/weather';

const Header = ({ dispatch, actions, user, module, setModule, history }) => {

   const [tabs, setTabs] = useState([
      { title: '视频监控', key: 'video' },
      { title: '基础信息', key: 'basis' },
      { title: '能耗监测', key: 'capacity' },
      { title: '电排远控', key: 'electrical' },
      { title: '实时监测', key: 'realTime' },
   ])

   useEffect(() => {
      const tabKey = sessionStorage.getItem('tabKey');
      if (tabKey) {
         setTabs([
            { title: '视频监控', key: 'video' },
            { title: '能耗监测', key: 'capacity' },
            { title: '电排远控', key: 'electrical' },
            { title: '实时监测', key: 'realTime' },
         ])
      };
   }, [])

   return <div style={{ width: '100%', height: 160 }}>
      <div style={{
         width: '100%', height: 130,
         display: 'flex',
         justifyContent: 'space-between',
         alignItems: 'center'
      }}>
         <Weather />
         <div style={{ width: 200, color: 'white', display: 'flex', alignItems: 'center' }}>
            <div style={{
               width: 130, height: 52,
               backgroundImage: 'url(/assets/images/monitor/user.png)',
               backgroundSize: '100% 100%',
               backgroundPosition: 'center',
               textIndent: 45, lineHeight: '52px'
            }}>
               {user?.name}
            </div>
            <div style={{ cursor: "pointer" }} onClick={() => {
               dispatch(actions.auth.logout(user));
               history.push(`/signin`);
            }}>退出</div>
         </div>

      </div>
      <div style={{ display: 'flex', justifyContent: 'center' }}>
         <div style={{
            width: '45%', height: 30, textAlign: 'center',
            backgroundImage: 'url(/assets/images/monitor/strip.png)',
            backgroundSize: '100% 50%',
            backgroundPosition: 'center',
            backgroundRepeat: 'no-repeat',
            display: 'flex',
            alignItems: 'flex-end', justifyContent: 'space-around',
         }}>
            {tabs.map(v => {
               return <div key={v.key} style={{
                  width: 100, height: 30, lineHeight: '30px',
                  backgroundImage: `url(/assets/images/monitor/${module == v.key ? 'pitch-on' : 'choseNone'}.png)`,
                  backgroundSize: '100% 100%',
                  backgroundPosition: '100% 100%',
                  backgroundRepeat: 'no-repeat',
                  color: 'white', cursor: "pointer"
               }} onClick={() => setModule(v.key)}>{v.title}</div>
            })}
         </div>
      </div>
   </div >
}

function mapStateToProps(state) {
   const { auth, global } = state;
   return {
      user: auth.user,
      actions: global.actions,
      clientHeight: global.clientHeight,
   }
}

export default connect(mapStateToProps)(Header);