import { connectStats } from "react-instantsearch-dom";
import CustomHits from "../CustomHits";
import CustomPagination from "../CustomPagination";
import CustomRefinementList from "../CustomRefinementList";
import React from "react";
import Text, { Element, Size } from "../Text";
import * as styles from "./styles.module.scss";

interface IProps {
  nbHits?: number;
  query: string;
}
const CustomSearch = ({ nbHits, query }: IProps) => {
  const resultPluralizedIt =
    nbHits === 1 ? "risultato trovato" : "risultati trovati";
  const attribute = "categoryIt";

  return (
    <React.Fragment>
      <header className={styles.header}>
        <Text element={Element.H1} size={Size.H4}>
          <em className={styles.accent}>{nbHits}</em> {resultPluralizedIt} su{" "}
          <em className={styles.accent}>{query}</em>
        </Text>
      </header>
      <div className={styles.grid}>
        <aside className={styles.aside}>
          <div className={styles.refinementList}>
            <CustomRefinementList
              attribute={attribute}
              searchable
              operator="and"
            />
          </div>
        </aside>
        <main className={styles.main}>
          <div className={styles.hits}>{query !== "" && <CustomHits />}</div>
          <CustomPagination styles={styles.pagination} />
        </main>
      </div>
    </React.Fragment>
  );
  // TODO: Add algolia logo
};

const CustomSearchConnected = connectStats(CustomSearch);

export default CustomSearchConnected;
