import React, { useState } from 'react';
import { connect } from 'react-redux';
import { NavLink } from 'react-router-dom';
import { actionLogout } from '../Actions/action_logout';
import Logout from '../Components/Logout/Logout';
import './header.css';

function Header({ loginName = "", isLogin = false, onLogout }) {

    let [isLogout, setIsLogout] = useState(false)

    return (
        <nav>
            <header className='header'>
                <img src="logo.png" />

                {!isLogin &&
                    <NavLink to="/login">
                        Login
                    </NavLink>
                }

                {isLogin &&
                    <div className="login-name__wrapper" onClick={() => setIsLogout((x) => !x)}>
                        {loginName}
                    </div>
                }

                {isLogout && <Logout onClick={() => {onLogout(); setIsLogout(false)}} />}
            </header>
        </nav>
    );
}

const CHeader = connect((s) => ({
    loginName: s.auth.login,
    isLogin: s.auth.isLogin
}), {
    onLogout: actionLogout
})(Header)

export default CHeader;