import React from "react";
import PropTypes from "prop-types";
import {
  CategoryCardContainer,
  CategoryCardDetailsContainer,
  CategoryCardLeftContainer,
  CategoryCardRightContainer,
} from "./CategoryCard.styled";
import CategoryCardName from "./CategoryCardName/CategoryCardName";
import CategoryDetail from "./CategoryDetail/CategoryDetail";
import CategoryCheckButton from "./CategoryCheckButton/CategoryCheckButton";
import CategoryEditButton from "./CategoryEditButton/CategoryEditButton";
import CategoryRemoveButton from "./CategoryRemoveButton/CategoryRemoveButton";
import { useTranslation } from "react-i18next";
import history from "../../../store/utils/history";
import { replaceInRoute } from "../../../util/helpers/routeHelpers";
import { ADMIN_SUBCATEGORIES_PAGE } from "../../../constants/pages";
import { useMemo } from "react";
import { useDispatch } from "react-redux";
import {
  toggleDeleteCategoryModal,
  toggleEditCategoryModal,
} from "../../../store/actions/modal/modalActions";

const CategoryCard = (props) => {
  const { t } = useTranslation();
  const dispatch = useDispatch();
  const navigateToCategory = () => {
    if (!props.hideCheckButton) {
      history.push(
        replaceInRoute(ADMIN_SUBCATEGORIES_PAGE, {
          categoryId: props.category._id,
        })
      );
    }
  };
  const showEditCategoryModal = () => {
    dispatch(
      toggleEditCategoryModal({
        hideImagePicker: props.type !== "categories",
        category: props.category,
        categoryId: props.categoryId,
        subcategory: props.subcategory,
        type: props.type,
        method: "edit",
        firstOutlined: false,
      })
    );
  };
  const showDeleteCategoryModal = () => {
    dispatch(
      toggleDeleteCategoryModal({
        categoryId: props.categoryId,
        subcategory: props.subcategory,
        category: props.category,
        type: props.type,
      })
    );
  };
  const isDisabledDelete = useMemo(() => {
    return (
      props?.category?.name === "Ostalo" || props?.category?.city === "Ostalo"
    );
  }, [props.category]);
  return (
    <>
      <CategoryCardContainer className={props.className}>
        <CategoryCardLeftContainer>
          <CategoryCardName
            image={props?.category?.image}
            categoryName={props?.category?.name || props?.category?.city}
            onClick={navigateToCategory}
          />
          <CategoryCardDetailsContainer>
            <CategoryDetail
              label={t("admin.categories.noOfOffers")}
              value={props?.category?.offerCount}
            />
            {!props.hideSecondLabel && (
              <CategoryDetail
                label={props?.secondLabel}
                value={
                  props?.category?.subcategories?.length ||
                  props?.category?.offerCount
                }
              />
            )}
          </CategoryCardDetailsContainer>
        </CategoryCardLeftContainer>
        <CategoryCardRightContainer>
          <CategoryRemoveButton
            disabled={isDisabledDelete}
            onClick={showDeleteCategoryModal}
          />
          <CategoryEditButton
            disabled={isDisabledDelete}
            onClick={showEditCategoryModal}
          />
          {!props.hideCheckButton && (
            <CategoryCheckButton onClick={navigateToCategory} />
          )}
        </CategoryCardRightContainer>
      </CategoryCardContainer>
    </>
  );
};

CategoryCard.propTypes = {
  children: PropTypes.node,
  category: PropTypes.object,
  hideCheckButton: PropTypes.bool,
  secondLabel: PropTypes.string,
  hideSecondLabel: PropTypes.bool,
  className: PropTypes.string,
  subcategory: PropTypes.bool,
  type: PropTypes.string,
  categoryId: PropTypes.string,
};

export default CategoryCard;
