/* eslint-disable react/no-array-index-key */
import React, { Fragment } from "react";
import classNames from "classnames";
import { isEmpty } from "../../../utils/utils";

type IProps = {
  dataList: Array<any>;
  refContainer: React.MutableRefObject<null>;
  onListKeyPress: any;
  onListClick(e: React.MouseEvent<HTMLElement>): any;
  setIsMatched?(foo?: boolean): any;
  currentValue?: string;
  alwaysListShow?: boolean;
}

const List: React.FC<IProps> = ({
  dataList,
  refContainer,
  onListClick,
  onListKeyPress,
  currentValue,
  setIsMatched,
  alwaysListShow
}) =>
  !isEmpty(dataList) ? (
    <ul
      ref={refContainer}
      className={`JDsearchInput__ul ${alwaysListShow &&
        "JDsearchInput__ul--show"}`}
    >
      {setIsMatched && setIsMatched(false)}
      {dataList.map((data, index) => {
        // 현재값이 데이터 와 일치되는것이 있다면
        if (currentValue === data.name) {
          setIsMatched && setIsMatched(true);
        }
        const classes = classNames({
          JDsearchInput__li: true,
          "JDsearchInput__li--selected": index === 0,
          "JDsearchInput__li--correspond": currentValue === data.name,
          "JDsearchInput__li--unDetail": !data.detail
        });

        return (
          // eslint-disable-next-line react/no-array-index-key
          <li
            role="menuitem"
            onKeyPress={onListKeyPress}
            onClick={onListClick}
            className={classes}
            key={`list${data.id}`}
            value={data.name}
            id={`${data.id}`}
          >
            <span>
              {data.name}
              {data.detail && (
                <Fragment>
                  <br />
                  <span className="JDsearchInput__detail">{data.detail}</span>
                </Fragment>
              )}
            </span>
          </li>
        );
      })}
    </ul>
  ) : (
    <div />
  );

export default List;