import React from 'react';
import PropTypes from 'prop-types';
import './style.css';

var UnorderedList = function UnorderedList(props) {
  return subList(props);
};

UnorderedList.propTypes = {
  /** The text displayed. */
  sublist: PropTypes.arrayOf(PropTypes.shape({
    text: PropTypes.string.required,
    sublist: PropTypes.arrayOf(PropTypes.shape({
      text: PropTypes.string.required
    }))
  }))
};

UnorderedList.defaultProps = {
  sublist: [{
    text: 'This is a list item in an unordered list'
  }, {
    text: 'An unordered list is a list in which the sequence of items is not important. Sometimes, an unordered list is a bulleted list. And this is a long list item in an unordered list that can wrap onto a new line.'
  }, {
    text: 'Lists can be nested inside of each other',
    sublist: [{
      text: 'This is a nested list item'
    }, {
      text: 'This is another nested list item in an unordered list'
    }]
  }, {
    text: 'This is the last list item'
  }]
};

var listItem = function listItem(props, itemIndex, ulIndex) {
  var raw = {
    __html: props.text
  };
  var key = 'li.' + ulIndex + '.' + itemIndex;
  /* eslint-disable-next-line react/no-danger */
  return React.createElement('li', { key: key, dangerouslySetInnerHTML: raw });
};

listItem.propTypes = process.env.NODE_ENV !== "production" ? {
  text: PropTypes.string
} : {};

var subList = function subList(props) {
  var newProps = Object.assign({}, props);
  if (!Object.prototype.hasOwnProperty.call(newProps, 'ulIndex')) {
    newProps.ulIndex = 0;
  }
  var ulId = 'ul.' + newProps.ulIndex;
  newProps.ulIndex += 1;
  var list = newProps.sublist;
  return React.createElement(
    'ul',
    { key: ulId },
    list && list.map(function (item, itemIndex) {
      if (item.sublist) {
        var subitem = [listItem(item, itemIndex, ulId)];
        subitem.push(subList(item));
        return subitem;
      }
      return listItem(item, itemIndex, ulId);
    })
  );
};

export default UnorderedList;