import { Menu } from "antd";

import React from "react";

import { Link, useLocation } from "react-router-dom";
import {
HomeOutlined,
HeartOutlined,
QuestionCircleOutlined,
ShoppingCartOutlined,
} from "@ant-design/icons";
import { Button } from "@material-ui/core";
import { Badge } from "antd";
import SetLanguage from "./language/SetLanguage";
import { translate } from "react-switch-lang";
import "../style/style.scss";
import { LOGIN_ROUTE } from './utils/consts'

class Navbar extends React.Component {

constructor(props) {
super(props);
this.state = {
current: "mail",
totalItems: 0,
};
}

render() {
const { t } = this.props;
const { current } = this.state;
const location = useLocation()
const isLogin = location.pathname === LOGIN_ROUTE
return (
<div className="navbar">
<Menu
onClick={this.handleClick}
selectedKeys={[current]}
mode="horizontal"
>
<Menu.Item key="main" icon={<HomeOutlined />}>
<Link to="/">{t("menu.home")}</Link>
</Menu.Item>
<Menu.Item key="products" icon={<HeartOutlined />}>
<Link to="/product">{t("menu.products")}</Link>
</Menu.Item>
<Menu.Item key="Faq" icon={<QuestionCircleOutlined />}>
<Link to="/faq">{t("menu.faq")}</Link>
</Menu.Item>
</Menu>

<div className="navbar__logo">
CLOTHES
<span>.STORE</span>
</div>
<Menu
onClick={this.handleClick}
selectedKeys={[current]}
mode="horizontal"
className="right-menu"
></Menu>
<div className="button_sign">{t("menu.signup")}</div>
 <Badge count={2}>
<Button component={Link} to="/cart">
<ShoppingCartOutlined />
</Button>
</Badge>
<div className="navbar_lang">
<SetLanguage />
</div>
</div>
);
}
}

export default translate(Navbar);