import { isUndefined } from 'lodash';
import { useEffect, useState } from 'react';
import { FaCaretDown, FaCaretUp } from 'react-icons/fa';

interface Props {
  visibleItems?: number;
  items: JSX.Element[];
  open?: boolean;
  onBtnClick?: (open: boolean) => void;
  forceCollapseList?: boolean;
}

const DEFAULT_VISIBLE_ITEMS = 5;

const ExpandableList = (props: Props) => {
  const [open, setOpenStatus] = useState(props.open || false);
  const numVisibleItems = props.visibleItems || DEFAULT_VISIBLE_ITEMS;
  const list = props.items.slice(0, open ? props.items.length : numVisibleItems);

  const onBtnClick = () => {
    if (!isUndefined(props.onBtnClick)) {
      props.onBtnClick(!open);
    }
    setOpenStatus(!open);
  };

  useEffect(() => {
    if (!isUndefined(props.open) && open !== props.open) {
      setOpenStatus(props.open);
    }
  }, [props.open]); /* eslint-disable-line react-hooks/exhaustive-deps */

  useEffect(() => {
    if (props.forceCollapseList && open) {
      setOpenStatus(!open);
    }
  }, [props.forceCollapseList]); /* eslint-disable-line react-hooks/exhaustive-deps */

  return (
    <>
      {list}

      {props.items.length > numVisibleItems && (
        <button data-testid="expandableListBtn" className="btn btn-link btn-sm p-0" onClick={() => onBtnClick()}>
          {open ? (
            <div className="d-flex align-items-center">
              <FaCaretUp className="me-1" />
              Show less...
            </div>
          ) : (
            <div className="d-flex align-items-center">
              <FaCaretDown className="me-1" />
              Show more...
            </div>
          )}
        </button>
      )}
    </>
  );
};

export default ExpandableList;
