import React, {useEffect, useRef, useState} from 'react';
import Navigation from "../Navigation/Navigation";
import logo from '../../assets/images/main/logo.png';
import Styles from './Header.module.css';
import {useTranslation} from "react-i18next";
import {HOME} from "../../uitls/Constants";
import {Link} from "react-router-dom";
import eventBus from "../../uitls/EventBus";

// 顶部导航栏组件
const Header = () => {
    const {i18n} = useTranslation();
    const [isMenuOpen, setIsMenuOpen] = useState(false);
    const currentMenuState = useRef(true);

    const changeLanguage = () => {
        const currentLanguage = i18n.language === 'zh' ? 'en' : 'zh'
        i18n.changeLanguage(currentLanguage);
    };
    const handleEmailClick = () => {
        const email = 'info@zhengqiai.com';
        const subject = encodeURIComponent('');
        const body = encodeURIComponent('');
        window.location.href = `mailto:${email}?subject=${subject}&body=${body}`;
    };
    useEffect(() => {
        eventBus.on("drawerStateRecover", (state) => {
            console.log(`drawerStateRecover ${state}`)
            currentMenuState.current = state;
            setIsMenuOpen(!state);
        });
        return () => {
            eventBus.off("drawerStateRecover");
        };
    }, []);
    return (
        <header className={Styles.root}>
            <button
                className={Styles.menuBtn}
                onClick={() => {
                    eventBus.emit('drawerState', currentMenuState.current);
                    setIsMenuOpen(currentMenuState.current);
                    currentMenuState.current = !currentMenuState.current;
                }}
            >
                {isMenuOpen ?'✕':'☰'}
            </button>
            <Link to={HOME} className={Styles.link} onClick={() => eventBus.emit('changeTabEvent', HOME)}>
                <img className={Styles.logoImg} src={logo} alt="logo"/>
            </Link>
            <div className={Styles.navigationState}>
                <Navigation/>
            </div>
        </header>
    );
};

export default Header;