import React, { useMemo, useRef, useState, useContext } from "react";
import { connectHitInsights } from 'react-instantsearch-dom';
import aa from "search-insights";
import styled from "styled-components";
import { Breakpoint } from "@arcteryx/components-typography";
import { ProductTile } from "@arcteryx/components-product-tile";
import { adaptProductTile, ProductTile as ProductTileModel } from "@arcteryx/data-models";
import { useIntersectionObserver } from "@arcteryx/components-hooks";
import { SiteContext } from "@arcteryx/components-contexts";
import { IndexContext } from "../context/IndexContext";
import { persistConversionData } from "../helpers";

const HitItem = styled.li`
  min-height: 400px; /* needs some height to avoid lazy loading too many on initial load */
  width: var(--product-tile-2-col);
  ${Breakpoint( "lg" )`
    width: var(--product-tile-3-col);
  `}
  ${Breakpoint( "xl" )`
    width: var(--product-tile-4-col);
  `}
  a {
    color: var(--colour-copy) !important;
  }
  span {
    line-height: inherit;
  }
  .qa--product-tile__thumbnail {
    box-sizing: border-box !important;
  }
  .product-badge {
    z-index: 1;
  }
  .product-tile__main-image {
    padding: 0; // override home page styling 
  }
`;

export const Hit = ( { hit, insights, onLoad = false } ) => {
  const ref = useRef();
  const [lazyProduct, setLazyProduct] = useState();
  const { analyticsEvents, index } = useContext( IndexContext );
  const { market } = useContext( SiteContext );

  const adaptedProductTile = adaptProductTile( hit );

  const product = useMemo( () => new ProductTileModel( adaptedProductTile ), [hit] );

  const lazyloadProduct = async () => {
    setLazyProduct( product );
    if ( onLoad ) {
      setLazyProduct( new ProductTileModel( await onLoad( product ) ) );
    }
  };

  const handleClick = () => {
    // Adobe Analytics
    // Params are the product object and the position of the product in the list - 1 because it's an array that starts at 0
    analyticsEvents.handleClickProductEvent( product, hit.__position - 1 );
    // Algolia Analytics
    // Built in insights function automatically gets the correct data
    insights( "clickedObjectIDsAfterSearch", { eventName: "Click item" } );
    // Function helps persist data for conversions when user adds to cart and checkout
    persistConversionData( {
      index,
      eventName: "Click item",
      queryID: hit.__queryID,
      objectIDs: [hit.objectID],
      positions: [hit.__position],
    } );
  };

  useIntersectionObserver( {
    target: ref,
    deps: [product.id],
    rootMargin: "400px",
    onIntersect: ( [{ isIntersecting }], observerElement ) => {
      if ( isIntersecting ) {
        lazyloadProduct();
        if ( observerElement && ref.current ) {
          observerElement.unobserve( ref.current );
        }
      }
    },
  } );

  return (
    <HitItem ref={ref} className="ais-Hits-item">
      {lazyProduct && (
        <ProductTile
          product={lazyProduct}
          imageLoadDebounceTime={400}
          onMouseDown={handleClick}
          hideProductFlag={market !== "outdoor"}
        />
      )}
    </HitItem>
  );
};

export const SearchHit = connectHitInsights( aa )( Hit );