import React, { useCallback } from "react";
import { connectHits } from 'react-instantsearch-dom';
import styled from "styled-components";
import { Product } from "@arcteryx/data-models";
import { SearchHit } from "./SearchHit";

const HitsContainer = styled.div`
  box-sizing: border-box;
  min-height: 29.333rem;
  max-width: 101rem;
  padding: 0 1rem 2rem;
  margin: 0 auto;
`;

const HitsList = styled.ul`
  min-width: 100%;
  min-height: 13.333rem;
  display: flex;
  flex-wrap: wrap;
  margin: 0 auto;
  justify-content: space-around;
`;

const Hits = ({ hits, personalizedPriceProvider, ...props }) => {
  const queue = Promise.resolve(); // Create a promise chain, used in onLoadProduct()
  const onLoadProduct = useCallback(async (product) => {
    // Add personalized pricing graphql requests to the queue to be resolved
    await queue.then(async () => {
      if (personalizedPriceProvider) {
        await Product.$updateRealtimePrices([product], personalizedPriceProvider);
      }
    });
    return product;
  });

  if (!hits?.length) {
    return null;
  }

  return (
    <HitsContainer className="ais-Hits">
      <HitsList className="ais-Hits-list">
        {hits?.map((hit, index) => (
          <SearchHit key={hit?.objectID} hit={hit} onLoad={onLoadProduct} {...props} />
        ))}
      </HitsList>
    </HitsContainer>
  );
};

export const SearchHits = connectHits(Hits);