import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import { Link } from "react-router-dom";
import {
  DropdownToggle,
  DropdownMenu,
  DropdownItem,
  Button,
  ButtonDropdown
} from "reactstrap";

export default class NavDropdown extends React.Component{
  state = {
    isOpen: false,
  }

  toggle = () => this.setState({isOpen: !this.state.isOpen});

  render(){
    return(
      <ButtonDropdown isOpen={this.state.isOpen} toggle={this.toggle}>
        <Button id="caret" color="link" className="pr-2">
          <Link className="nav-link pr-0" to={this.props.link.url}>{this.props.link.name}</Link>
        </Button>
        <DropdownToggle caret color="link" className="pl-0" style={{color: "rgba(255,255,255,.5)"}}/>
        <DropdownMenu right>
          <DropdownItem >
            <Link className="nav-link text-dark" to={this.props.link.url}>
              {this.props.link.name}
            </Link>
          </DropdownItem>
          {this.props.link.sublinks.map((sublink, idx) => (
            <DropdownItem key={idx}>
              <Link className="nav-link text-dark" to={sublink.url} key={idx}>
                {sublink.name}
              </Link>
            </DropdownItem>
          ))}

        </DropdownMenu>
      </ButtonDropdown>
    );
  }
}