import React, { Component } from "react";
import { Row, Col, Icon, Badge, Menu, Dropdown } from "antd";
import Search from "antd/lib/input/Search";
import { NavLink, Redirect } from "react-router-dom";
import serviceCategory from "./api/services/ServiceCategory";

const SubMenu = Menu.SubMenu;

class Header extends Component {
  constructor() {
    super();
    this.state = {
      categoryFeature: []
    };
  }

  componentWillMount() {
    this.getCategoryFeature();
  }

  getCategoryFeature = () => {
    serviceCategory
      .CategoryFeature()
      .then(response => {
        const categoryFeature = response.data;
        this.setState({
          categoryFeature: categoryFeature
        });
      })
      .catch(error => {
        console.log(error);
      });
  };

  categoryMenu = () => {
    return this.state.categoryFeature.map(category => (
      <Menu>
        <Menu.Item>{category.menu}</Menu.Item>
      </Menu>
    ));
  };

  render() {
    return (
      <div className="navigation">
        {this.renderRedirectToCart}
        <div className="container-fluid">
          <hr className="line-navigation" />
          <Row>
            <Col md={24}>
              <div className="container">
                <div className="categories-navigation">
                  <Dropdown overlay={this.categoryMenu}>
                    <a className="ant-dropdown-link" href="#">
                      Cascading menu <Icon type="down" />
                    </a>
                  </Dropdown>
                  ,
                </div>
              </div>
            </Col>
          </Row>
          <hr className="line-navigation" />
        </div>
      </div>
    );
  }
}

export default Header;