import { connectCurrentRefinements } from "react-instantsearch-dom";
import { GalleryContext } from "../Layout";
import { Link } from "gatsby";
import { Location } from "@reach/router";
import { usePrettify } from "../../hooks/use-prettify";
import * as styles from "./styles.module.scss";
import CustomHighlight from "../CustomHighlight";
import CustomSnippet from "../CustomSnippet";
import NonStretchedImage from "../NonStretchedImage";
import React, { useContext } from "react";
import Tags from "../Tags";
import Text, { Element, Size } from "../Text";

interface IProps {
  hit: any;
  item: any;
  refine: () => void;
}

const GridItemClearRefinements = ({ hit, item, refine }: IProps) => {
  const galleryAll = useContext(GalleryContext);
  let link;
  let alt;
  let thumb;
  let titolo;
  let categories;
  let price;

  if (item) {
    thumb = galleryAll.find(
      element => element.relativeDirectory == item.parent.relativeDirectory
    );
    titolo = usePrettify(item.titolo);
    categories = item.categoryIt;
    link = `/${item.parent.relativeDirectory}`;
    alt = `${titolo} anteprima`;
    price = item.price;
  }

  if (hit) {
    link = `/${hit.relativeDirectory}`;
    alt = `${hit.titoloPretty} anteprima`;
    thumb = galleryAll.find(element => {
      return element.relativeDirectory === hit.relativeDirectory;
    });
    titolo = hit.titoloPretty;
    categories = hit.categoryIt;
    price = hit.price;
  }

  const clearRefinement = () => {
    if (location.pathname.includes(link)) {
      refine();
    }
  };

  return (
    <Location>
      {() => (
        <div className={styles.item}>
          <Link
            className={styles.link}
            to={link}
            onClick={() => clearRefinement()}
          >
            {thumb && (
              <div className={styles.image}>
                <NonStretchedImage
                  className={styles.imageInner}
                  fluid={thumb.fluid}
                  alt={alt}
                />
              </div>
            )}
            {item && (
              <Text
                element={Element.H3}
                size={Size.GridItemTitle}
                className={styles.title}
              >
                {titolo}
              </Text>
            )}
            {hit && (
              <React.Fragment>
                <Text
                  element={Element.H3}
                  size={Size.GridItemTitle}
                  className={styles.title}
                >
                  <CustomHighlight attribute="titoloPretty" hit={hit} />
                </Text>
                <CustomSnippet
                  attribute="descrizioneAlgolia"
                  hit={hit}
                  className={styles.description}
                />
              </React.Fragment>
            )}
          </Link>
          <Tags tags={categories} className={styles.tags} size={Size.Tag1} />
          <div className={styles.value}>
            <span className={styles.estimate}>Valore stimato —</span>
            <span className={styles.price}>€{price}</span>
          </div>
        </div>
      )}
    </Location>
  );
};

const GridItem = connectCurrentRefinements(GridItemClearRefinements);

export default GridItem;
