import React from "react";
import PropTypes from "prop-types";
import { FilterFooterContainer } from "./FilterFooter.styled";
import selectedTheme from "../../../../themes";
import { PrimaryButton } from "../../../Buttons/PrimaryButton/PrimaryButton";
import { useTranslation } from "react-i18next";
import useScreenDimensions from "../../../../hooks/useScreenDimensions";

const FilterFooter = (props) => {
  const { t } = useTranslation();
  const filters = props.filters;
  const screenDimensions = useScreenDimensions();
  const handleFilters = () => {
    filters.apply();
    if (props.toggleFilters) props.toggleFilters();
  };
  return (
    <FilterFooterContainer responsiveOpen={screenDimensions.width < 600}>
      {screenDimensions.width < 600 && (
        <PrimaryButton
          variant="outlined"
          fullWidth
          onClick={props.toggleFilters}
          textcolor={selectedTheme.primaryPurple}
          font="Open Sans"
          style={{
            fontWeight: "600",
            fontSize: "12px",
            border: "0",
            textAlign: "center",
          }}
        >
          {t("common.close")}
        </PrimaryButton>
      )}
      <PrimaryButton
        variant="outlined"
        fullWidth
        onClick={handleFilters}
        textcolor={selectedTheme.primaryPurple}
        font="Open Sans"
        style={{
          fontWeight: "600",
          fontSize: "12px",
          borderColor: selectedTheme.primaryPurple,
        }}
      >
        {t("filters.usefilters")}
      </PrimaryButton>
    </FilterFooterContainer>
  );
};

(FilterFooter.propTypes = {
  responsiveOpen: PropTypes.bool,
  toggleFilters: PropTypes.func,
  filters: PropTypes.any,
}),
  (FilterFooter.defaultProps = {
    responsiveOpen: false,
  });

export default FilterFooter;
