"use client";

import { IShopCategory } from "@/types/types";
import { toggleBtnClass } from "@/lib/ui/buttonStyles";
import { cn } from "@/lib/utils";
import { useTranslation } from "react-i18next";

type ProductCategoryPickerProps = {
  categoryList: IShopCategory[] | null;
  category: string;
  subCategory: string;
  subSubCategory: string;
  onCategorySelect: (category: string) => void;
  onSubCategorySelect: (subCategory: string) => void;
  onSubSubCategorySelect: (subSubCategory: string) => void;
};

export default function ProductCategoryPicker({
  categoryList,
  category,
  subCategory,
  subSubCategory,
  onCategorySelect,
  onSubCategorySelect,
  onSubSubCategorySelect,
}: ProductCategoryPickerProps) {
  const { t } = useTranslation("common");
  const mainCount = categoryList?.length ?? 0;
  const selectedCategory = categoryList?.find(
    (item) => item.category === category
  );
  const selectedSubCategory = selectedCategory?.sub_categories.find(
    (item) => item.name === subCategory
  );

  if (!mainCount) {
    return (
      <p className="mt-4 text-center text-sm text-gray-500">
        {t("shops.loadingCategories")}
      </p>
    );
  }

  return (
    <div className="mt-4 flex w-full flex-col items-center gap-6 px-2">
      <div className="flex w-full flex-col items-center">
        <p className="mb-2 text-center text-xs text-gray-500">
          {t("shops.selectMainCategory")}
        </p>
        <div className="grid w-full grid-cols-5 gap-1.5">
          {categoryList?.map((item) => (
            <button
              key={item._id}
              type="button"
              className={cn(
                toggleBtnClass(category === item.category),
                "min-h-9 p-1.5 text-[11px] leading-tight"
              )}
              onClick={() => onCategorySelect(item.category)}
            >
              {item.category}
            </button>
          ))}
        </div>
      </div>

      {selectedCategory && selectedCategory.sub_categories.length > 0 && (
        <div className="flex w-full flex-col items-center">
          <p className="mb-2 text-center text-xs text-gray-500">
            {t("shops.selectSubCategory")}
          </p>
          <div className="grid w-full grid-cols-4 gap-1.5">
            {selectedCategory.sub_categories.map((item) => (
              <button
                key={item._id}
                type="button"
                className={cn(
                  toggleBtnClass(subCategory === item.name),
                  "min-h-9 p-1.5 text-[11px] leading-tight"
                )}
                onClick={() => onSubCategorySelect(item.name)}
              >
                {item.name}
              </button>
            ))}
          </div>
        </div>
      )}

      {selectedSubCategory &&
        (selectedSubCategory.sub_sub_categories?.length ?? 0) > 0 && (
          <div className="flex w-full flex-col items-center">
            <p className="mb-2 text-center text-xs text-gray-500">
              {t("shops.selectSubSubCategory")}
            </p>
            <div className="grid w-full grid-cols-3 gap-1.5">
              {selectedSubCategory.sub_sub_categories?.map((item) => (
                <button
                  key={item._id}
                  type="button"
                  className={cn(
                    toggleBtnClass(subSubCategory === item.name),
                    "min-h-9 p-1.5 text-[11px] leading-tight"
                  )}
                  onClick={() => onSubSubCategorySelect(item.name)}
                >
                  {item.name}
                </button>
              ))}
            </div>
          </div>
        )}
    </div>
  );
}
