import React from 'react';
import cn from 'classnames';

import Icon from '../icons';
import './scss/breadcrumb.scss';


const Item = (props) => {
  const { active, children, href, label } = props;
  const itemClassnames = cn({
    'omni-breadcrumb__item': true,
    'omni-breadcrumb__link': href,
    'omni-breadcrumb__link_active': active,
  });
  const link = active 
    ? <div>{label}</div>
    : <a href={href}>{label}</a>;

  return ( 
    <div className={itemClassnames}>
      {children || link}
    </div>
  );
};

export default class Breadcrumb extends React.Component {
  static defaultProps = {
    separator: <Icon className='omni-breadcrumb__separator__icon' name='keyboard_arrow_right' />,
  };

  static Item = Item;

  getSeparator = () => {
    const { separator } = this.props;
    return <div className='omni-breadcrumb__separator'>{separator}</div>;
  }

  render() {
    const { children, separator, links } = this.props;
    const isActive = (index) => (links.length - 1) === index;
    const linkItems = links 
      ? links.map((linkProps, index) => <Item active={isActive(index)} {...linkProps}  />)
      : children;
    
    const linksWithSeparator = linkItems.reduce((acc, item, index) => {
      return ((linkItems.length - 1) === index) ? [ ...acc, item ] : [ ...acc, item, this.getSeparator()];
    }, [])
    .map((item, index) => ({ ...item, key: index }));

    return (
      <div className='omni-ui-general omni-breadcrumb'>
        {linksWithSeparator}
      </div>
    );
  }
}