import PropTypes from 'prop-types';
import React from 'react';
// import styled from 'styled-components';
import { Link } from 'react-router';
import _ from 'lodash';

class BreadCrumbs extends React.Component { // eslint-disable-line react/prefer-stateless-function
  constructor(props) {
    super(props);
    this.prepareBreadcrumbElement = this.prepareBreadcrumbElement.bind(this);
    this.disabledBreadcrumb = this.disabledBreadcrumb.bind(this);
  }

  disabledBreadcrumb(e, location) {
    if (location.disabled) {
      e.preventDefault();
    }
  }

  prepareBreadcrumbElement() {
    const breadcrumbs = [];
    _.forEach(this.props.locations, (location) => {
      const titleText = (typeof location.text === 'string') ? location.text : location.text.props.defaultMessage;
      const element = (
        <Link
          to={location.url}
          key={titleText}
          title={titleText}
          onClick={(e) => this.disabledBreadcrumb(e, location)}
        >
          <span
            className={location.disabled ? 'disabled-breadcrumb' : 'active-breadcrumb'}
            disabled={location.disabled}
          > {location.text}
          </span>
        </Link>
      );
      if (breadcrumbs.length !== 0) {
        breadcrumbs.push(
          <span
            key={`${titleText}separator`}
          > {this.props.separator ? this.props.separator : ' / '}
          </span>
        );
      }
      breadcrumbs.push(element);
    });
    return breadcrumbs;
  }

  render() {
    return (
      <div className="breadcrumbs-wrapper">
        {this.prepareBreadcrumbElement()}
      </div>
    );
  }
}

BreadCrumbs.propTypes = {
  locations: PropTypes.array.isRequired,
  separator: PropTypes.string,
};

export default BreadCrumbs;
