import * as cn from "classnames";
import * as React from "react";
import Template from "../template";
import { ITemplateProps } from "../template/interfaces";
import templateAreas from "../template/templateAreas";
import * as styles from "./styles.css";

export interface ITemplateAreas {
  keywords?: React.ReactNode;
  results?: React.ReactNode;
}

const TemplateAutocomplete = ({
  children,
  className,
}: ITemplateProps) => {
  const areas: ITemplateAreas = templateAreas([
    "keywords",
    "results",
  ], children);

  return (
    <Template
      className={cn(styles.templateAutocomplete, className)}
      key="template-autocomplete"
    >
      {areas.keywords &&
        <Template.Area
          key="keywords"
          className={cn(styles.templateAreaKeywordsAutocomplete, "js-templateAreaKeywordsAutocomplete")}
        >
          {areas.keywords}
        </Template.Area>
      }

      {areas.results &&
        <Template.Area
          key="results"
          className={cn(styles.templateAreaResultsAutocomplete, "js-templateAreaResultsAutocomplete")}
        >
          {areas.results}
        </Template.Area>
      }
    </Template>
  );
};

export default TemplateAutocomplete;