import React, { useState } from 'react';
import { Link, useLocation } from 'react-router-dom';
import { shallowEqual, useSelector } from 'react-redux';
import { useTranslation } from 'react-i18next';
import classnames from 'classnames';
import Menu from './Menu';
import logo from '../ui/svg/logo.svg';
import './Header.css';

const Header = () => {
    const [isMenuOpen, setIsMenuOpen] = useState(false);
    const { t } = useTranslation();

    const {
        protectionEnabled,
        processing,
        isCoreRunning,
        processingProfile,
        name,
    } = useSelector((state) => state.dashboard, shallowEqual);

    const { pathname } = useLocation();

    const toggleMenuOpen = () => {
        setIsMenuOpen((isMenuOpen) => !isMenuOpen);
    };

    const closeMenu = () => {
        setIsMenuOpen(false);
    };

    const badgeClass = classnames('badge dns-status', {
        'badge-success': protectionEnabled,
        'badge-danger': !protectionEnabled,
    });

    return <div className="header">
        <div className="header__container">
            <div className="header__row">
                <div
                    className="header-toggler d-lg-none ml-lg-0 collapsed"
                    onClick={toggleMenuOpen}
                >
                    <span className="header-toggler-icon" />
                </div>
                <div className="header__column">
                    <div className="d-flex align-items-center">
                        <Link to="/" className="nav-link pl-0 pr-1">
                            <img src={logo} alt="AdGuard Home logo" className="header-brand-img" />
                        </Link>
                        {!processing && isCoreRunning
                        && <span className={badgeClass}
                        >{t(protectionEnabled ? 'on' : 'off')}
                        </span>}
                    </div>
                </div>
                <Menu
                    pathname={pathname}
                    isMenuOpen={isMenuOpen}
                    closeMenu={closeMenu}
                />
                <div className="header__column">
                    <div className="header__right">
                        {!processingProfile && name
                        && <a href="control/logout" className="btn btn-sm btn-outline-secondary">
                            {t('sign_out')}
                        </a>}
                    </div>
                </div>
            </div>
        </div>
    </div>;
};

export default Header;
