import React from "react";
import styled from "styled-components";
import { GlobalStyles } from "@arcteryx/components-typography";
import { ConnectedSearchBar as SearchBar } from "./components/SearchBar";
import SearchProvider from "./provider/SearchProvider";
import { SearchHits } from "./components/SearchHits";
import "@algolia/autocomplete-theme-classic/dist/theme.css";

const SearchContainerWrapper = styled.div`
  min-height: 75vh;
  overflow: hidden;
  color: var(--colour-copy);
  background-color: var(--white);
  -webkit-font-smoothing: initial;
  .search-bar-container {
    z-index: 100;
  }
`;

/**
 * SearchContainer
 * @param {string} mountNode document.createElement("div")
 * @param {object} stateFromHeader market, language, country, environment
 * @param {string} algoliaAppId get from Algolia dashboard
 * @param {string} algoliaApiKey get from Algolia dashboard
 * @param {integer} searchDebounceTime 400
 * @param {boolean} personalizedPriceProvider create provider from data-providers
 * @param {string} cmsUrl *.arcteryx.com
 * @param {object} analyticsEvents  handleListingViewedEvent(), handleSearchEvent(), handleClickProductEvent()
 * @param {string} deployEnv qa, stage, prod
 * @param {array} staticSearchLinks []
 * @returns Algolia React InstantSearch Container
 */
const SearchContainer = ({
  mountNode,
  stateFromHeader,
  algoliaAppId,
  algoliaApiKey,
  searchDebounceTime,
  personalizedPriceProvider = false,
  cmsUrl,
  analyticsEvents,
  deployEnv,
  cmsStaticSearchLinks = [],
}) => {
  return (
    <SearchContainerWrapper>
      <GlobalStyles />
      <SearchProvider
        stateFromHeader={stateFromHeader}
        searchDebounceTime={searchDebounceTime}
        analyticsEvents={analyticsEvents}
        deployEnv={deployEnv}
        algoliaAppId={algoliaAppId}
        algoliaApiKey={algoliaApiKey}
      >
        <SearchBar mountNode={mountNode} cmsUrl={cmsUrl} cmsStaticSearchLinks={cmsStaticSearchLinks} />
        <SearchHits personalizedPriceProvider={personalizedPriceProvider} />
      </SearchProvider>
    </SearchContainerWrapper>
  );
};

export default SearchContainer;