import React from 'react';
import {
  Breadcrumb,
  BreadcrumbItem
} from 'reactstrap';
import {
  Link
} from 'react-router-dom';
import API from './Api';

class Navigation extends React.Component {
  constructor(props) {
    super(props);

    const Breadcrumb = [];

    if (API.defaults.headers.common.Authorization !== undefined) {
      if (this.props.root && this.props.root === 'Property') {
        Breadcrumb.push({
          name: 'Propriétés',
          path: '/properties',
          active: true,
        });
      } else {
        Breadcrumb.push({
          name: 'Catégories',
          path: '/categories',
          active: !this.props.categoryId,
        });

        if (this.props.categoryId) {
          Breadcrumb.push({
            name: this.props.categoryId,
            path: `/categories/${this.props.categoryId}`,
            active: !this.props.vegetableId,
          });

          if (this.props.vegetableId) {
            Breadcrumb.push({
              name: this.props.vegetableId,
              path: `/categories/${this.props.categoryId}/vegetal/${this.props.vegetableId}`,
              active: true,
            });
          }
        }
      }
    }

    this.state = {
      Breadcrumb,
    };
  }

  componentWillReceiveProps(props) {
    if (props.categoryName) {
      const Breadcrumb = this.state.Breadcrumb;
      Breadcrumb[1].name = props.categoryName;
      this.setState({
        Breadcrumb
      });
    }
    if (props.vegetableName) {
      const Breadcrumb = this.state.Breadcrumb;
      Breadcrumb[2].name = props.vegetableName;
      this.setState({
        Breadcrumb
      });
    }
  }

  render() {
    return (
      <div>
        <Breadcrumb>
          { this.state.Breadcrumb.map((item, key) => (
            item.active === true
              ? (
                <BreadcrumbItem key={key} active>
                  {item.name}
                </BreadcrumbItem>
              )
              : (
                <BreadcrumbItem key={key}>
                  <Link to={item.path}>{item.name}</Link>
                </BreadcrumbItem>
              )
          ))}
        </Breadcrumb>
      </div>
    );
  }
}

export default Navigation;