import React from "react";
import PropTypes from "prop-types";
import FilterRadioDropdown from "../../FilterDropdown/Radio/FilterRadioDropdown";
import { CategoryChosenIcon, CategoryIcon } from "./CategoryChoser.styled";
import { useTranslation } from "react-i18next";

const firstCategoryOption = {
  label: "SVE KATEGORIJE",
  value: { _id: 0 },
};

const CategoryChoser = (props) => {
  const filters = props.filters;
  const { t } = useTranslation();
  const handleSelectCategory = (category) => {
    filters.category.setSelectedCategory(category);
    filters.subcategory.setSelectedSubcategory({});
  };
  return (
    <FilterRadioDropdown
      data={[...filters?.category.allCategories]}
      icon={
        filters.category.selectedCategoryLocally?.name ? (
          <CategoryChosenIcon />
        ) : (
          <CategoryIcon />
        )
      }
      title={
        filters.category.selectedCategoryLocally?.name
          ? filters.category.selectedCategoryLocally?.name
          : t("filters.categories.title")
      }
      searchPlaceholder={t("filters.categories.placeholder")}
      setSelected={handleSelectCategory}
      selected={filters.category.selectedCategoryLocally}
      firstOption={firstCategoryOption}
    />
  );
};

CategoryChoser.propTypes = {
  filters: PropTypes.any,
};

export default CategoryChoser;
