import { ISearch } from "@lonelyplanet/open-planet-node/dist/resources/search";
import * as cn from "classnames";
import * as React from "react";
import { AutocompleteResultsListItem } from "./autocompleteResultsListItem";
import * as styles from "./styles.css";

export interface IResultList {
  items: ISearch[];
  className?: string;
}

const getImageUrl = str => str && str.includes("imgix") ? str : "";

export const AutocompleteResultsList = ({ items, className }: IResultList) => (
  <ul className={cn(styles.list, className)}>
    {items.length > 0 && items.map((item, index) => {
      let subHead = item.opType || "";
      const image = item.opType === "place" ? getImageUrl(item.thumbnail) : "";

      return (
        <AutocompleteResultsListItem
          title={item.title}
          key={index}
          url={item.url}
          isVideo={item.opType === "video"}
          subHead={subHead}
          opType={item.opType}
          image={image}
        />
      );
    })}
  </ul>
);