import * as classNames from "classnames";
import * as _ from "lodash";
import * as React from "react";

import { openLink } from "../../utilities/dom";

interface IListProps {
  items: number,
  renderContent: (item: number) => JSX.Element,
  renderBullet?: (item: number) => JSX.Element,
  renderTail?: (item: number) => JSX.Element,
  /**
   * A list item can be rendered as a link. This function should
   * return the src to be opened.
   */
  asLink?: (item: number) => string;
  style?: object;
  className?: string;
  onSelect?: (item: number) => void;
}

export const List = ({ items, renderContent, renderBullet, renderTail, asLink, onSelect, className, style }: IListProps) => (
  <ul
    className={classNames("list", {
      [className]: _.isString(className),
    })}
    {..._.isObject(style) && {
      style,
    }}
  >
    {Array.from({ length: items }).map((item, index) => {
      return (
        <li
          className={classNames("list__item", {
            "list__item--link": _.isFunction(asLink),
          })}
          key={index}
          {..._.isFunction(asLink) && {
            onClick: () => {
              if (_.isFunction(onSelect)) {
                onSelect(index);
              }

              openLink(asLink(index), true)
            },
          }}
        >
          {_.isFunction(renderBullet) && (
            <div className="list__item-bullet">
              {renderBullet(index)}
            </div>
          )}

          <div className="list__item-content">
            {renderContent(index)}
          </div>

          {_.isFunction(renderTail) && (
            <div className="list__item-tail">
              {renderTail(index)}
            </div>
          )}
        </li>
      );
    })}
  </ul>
)