import React from 'react';
import PropTypes from 'prop-types';
import md5 from 'md5';

import IndexEntryItem from './IndexEntryItem';

const IndexEntry = ({ letter, items }) => (
  <li>
    { letter }
    <ul className="p-0 mb-2 small">
      {
        items.sort().map(indexEntryItem => <IndexEntryItem term={indexEntryItem} key={`${letter}_${md5(indexEntryItem)}`} />)
      }
    </ul>
  </li>
);

IndexEntry.propTypes = {
  letter: PropTypes.string.isRequired,
  items: PropTypes.arrayOf(PropTypes.string).isRequired,
};

const Index = ({ terms }) => {
  const termsIndex = terms.reduce((res, term) => {
    const firstLetter = term[0];
    res[firstLetter] = (res[firstLetter] || []);
    res[firstLetter].push(term);
    return res;
  }, {});

  return (
    <ul id="index" className="text-muted p-0">
      {
        Object.keys(termsIndex).sort().map(
          letter => <IndexEntry letter={letter} items={termsIndex[letter]} key={letter} />,
        )
      }
    </ul>
  );
};

Index.propTypes = {
  terms: PropTypes.arrayOf(PropTypes.string).isRequired,
};

const IndexList = ({ terms, className }) => (
  <div className={className}>
    <Index terms={terms} />
  </div>
);

IndexList.propTypes = {
  terms: PropTypes.arrayOf(PropTypes.string).isRequired,
  className: PropTypes.string.isRequired,
};

export default IndexList;