import React from "react";
import PropTypes from "prop-types";
import { Chip } from "@material-ui/core";

const ECUList = ({ list, delimiter, search, searchedOnly }) => {
  if (!list) return null;
  if (!delimiter) delimiter = ",";
  const items = list.split(delimiter);

  return items.map((item, index) => {
    const match = search
      ? item.toLowerCase().split(" ").indexOf(search.toLowerCase())
      : -1;

    if (searchedOnly && match === -1) return null;
    return (
      <Chip
        key={index}
        label={item}
        size="small"
        variant={match > -1 ? "default" : "outlined"}
        color={match > -1 ? "primary" : "default"}
        style={{ margin: 1 }}
      />
    );
  });
};

ECUList.propTypes = {
  list: PropTypes.string,
  delimiter: PropTypes.string,
  search: PropTypes.string,
  searchedOnly: PropTypes.bool,
};

export default ECUList;
