import React from 'react';

import PropTypes from 'prop-types';

import md5 from 'md5';

import { connect } from 'react-redux';

import IndexList from '../ui/IndexList';

import TermEntry from '../ui/TermEntry';

import './glossary.scss';

const GlossaryTerms = ({ termsDict }) => Object.keys(termsDict).sort().map((term, i) => {

  const key = `${md5(term)}-${i}`;

  return <TermEntry term={term} termDef={termsDict[term]} index={i} key={key} />;

});

GlossaryTerms.propTypes = {

  termsDict: PropTypes.object.isRequired,

};

const GlossaryPage = ({ terms }) => (

  <div className="row glossary-row">

    <IndexList terms={Object.keys(terms)} className="col col-2 glossary-cols" />

    <div className="col col-10 glossary-cols">

      <table className="glossary-table table">

        <tbody>

          <GlossaryTerms termsDict={terms} />

        </tbody>

      </table>

    </div>

  </div>

);

GlossaryPage.propTypes = {

  terms: PropTypes.object.isRequired,

};

export default connect(

  (state) => {

    const { terms } = state;

    return {

      terms,

    };

  },

)(GlossaryPage);