import React from 'react';
import styled from 'styled-components';
import { Grid, Col } from 'react-styled-flexboxgrid';
import { Link } from 'react-router-dom';
import forceArray from 'force-array';
import PropTypes from 'prop-types';
import remcalc from 'remcalc';

import { Breadcrumb, BreadcrumbItem } from 'joyent-ui-toolkit';

const BreadcrumbLink = styled(Link)`
  text-decoration: none;
  cursor: pointer;

  &:visited {
    color: inherit;
  }
`;

const BreadcrumbContainer = styled.div`
  border-bottom: solid ${remcalc(1)} ${props => props.theme.grey};
`;

const getBreadcrumbItems = (...links) =>
  forceArray(links).map(({ pathname, name }, i) => {
    const item =
      i + 1 >= links.length ? (
        name
      ) : (
        <BreadcrumbLink to={pathname}>{name}</BreadcrumbLink>
      );

    return <BreadcrumbItem key={name}>{item}</BreadcrumbItem>;
  });

const NavBreadcrumb = ({ links = [] }) => (
  <BreadcrumbContainer>
    <Grid>
      <Col xs={12}>
        <Breadcrumb>{getBreadcrumbItems(...links)}</Breadcrumb>
      </Col>
    </Grid>
  </BreadcrumbContainer>
);

NavBreadcrumb.propTypes = {
  links: PropTypes.arrayOf(
    PropTypes.shape({
      name: PropTypes.string,
      pathname: PropTypes.string
    })
  )
};

export default NavBreadcrumb;