import React, { useState, useEffect } from "react";
import { useTranslation } from "react-i18next";
import styled from "styled-components";
import { FilterApplied } from "@arcteryx/components-filterbar";
import { adaptRefinementsApplied } from "@arcteryx/data-models";
import connectRefinementsApplied from "../connectors/connectRefinementsApplied";

const FilterAppliedBase = styled(props => <FilterApplied {...props} />)``;

const RefinementsApplied = ({
  refinements,
  refine,
  sortList,
}) => {
  const { t } = useTranslation("container-search");
  const [ activeFilters, setActiveFilters ] = useState([]);

  useEffect(() => {
    const refinementsApplied = adaptRefinementsApplied({list: refinements, t, sortList});

    setActiveFilters(refinementsApplied);
  }, [refinements]);

  const refineFilter = ({ value }) => {
    // if no clear value function, it is the handleResetAll click
    if (!value) {
      // pass in all refinements to be cleared by the refine function 
      // defined below in the custom connector
      refine(refinements);
      setActiveFilters([]);
      return;
    }
    refine(value);
  };

  if (activeFilters?.length) {
    return (
      <FilterAppliedBase
        activeFilters={activeFilters}
        handleFacetRemove={props => refineFilter(props)}
        handleResetAll={props => refineFilter(props)}
      />
    );
  }
  return null;
};

const FilterRefinementsApplied = connectRefinementsApplied(React.memo(RefinementsApplied));

export { RefinementsApplied, FilterRefinementsApplied };