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;
  searches?: React.ReactNode;
  topics?: React.ReactNode;
  featured?: React.ReactNode;
  destinations?: React.ReactNode;
}

const TemplateSearchActive = ({
  children,
  className,
}: ITemplateProps) => {
  const areas: ITemplateAreas = templateAreas([
    "keywords",
    "searches",
    "topics",
    "featured",
    "destinations",
  ], children);

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

      {areas.searches &&
        <Template.Area
          key="searches"
          className={styles.templateAreaSearches}
        >
          {areas.searches}
        </Template.Area>
      }

      {areas.topics &&
        <Template.Area
          key="topics"
          className={styles.templateAreaTopics}
        >
          {areas.topics}
        </Template.Area>
      }

      {areas.featured &&
        <Template.Area
          key="featured"
          className={styles.templateAreaFeatured}
        >
          {areas.featured}
        </Template.Area>
      }

      {areas.destinations &&
        <Template.Area
          key="destinations"
          className={styles.templateAreaDestinations}
        >
          {areas.destinations}
        </Template.Area>
      }
    </Template>
  );
};

export default TemplateSearchActive;