import { connectRefinementList } from "react-instantsearch-dom";
import * as classNames from "classnames";
import * as styles from "./styles.module.scss";
import React from "react";
import Text, { Element, Size, Color, LineHeight } from "../Text";
import CustomHighlight from "../CustomHighlight";

const RefinementList = ({
  items,
  isFromSearch,
  refine,
  searchForItems,
  createURL
}) => (
  <React.Fragment>
    <header className={styles.header}>
      <Text element={Element.H4} size={Size.Eyebrow1} color={Color.Faded1}>
        Categorie
      </Text>
    </header>
    <input
      className={styles.input}
      type="search"
      onChange={event => searchForItems(event.currentTarget.value)}
    />
    <ul className={styles.list}>
      {items.map(item => (
        <li key={item.label}>
          <a
            href={createURL(item.value)}
            className={styles.link}
            onClick={event => {
              event.preventDefault();
              refine(item.value);
            }}
          >
            <input
              name={item.label}
              type="checkbox"
              defaultChecked={item.isRefined}
              className={classNames({
                [styles.active]: item.isRefined,
                [styles.checkbox]: true
              })}
            />
            <div>
              <Text
                element={Element.Span}
                size={Size.Tag1}
                lineHeight={LineHeight.Title}
                className={classNames({
                  [styles.category]: true,
                  [styles.active]: item.isRefined
                })}
              >
                {isFromSearch ? (
                  <CustomHighlight attribute="label" hit={item} />
                ) : (
                  item.label
                )}
              </Text>{" "}
              <Text element={Element.Span} size={Size.P1} color={Color.Faded1}>
                {item.count}
              </Text>
            </div>
          </a>
        </li>
      ))}
    </ul>
  </React.Fragment>
);

const CustomRefinementList = connectRefinementList(RefinementList);

export default CustomRefinementList;
