import React, { FC, useContext } from "react";
import Router, { useRouter } from "next/router";
import get from "lodash/get";
import PropTypes from "prop-types";
import { Breadcrumb } from "antd";
import { createBreadcrumb, getFlattenCategory } from "../../globalUtils/utils";
import shopConetxt from "../../../context/shopConetxt";

const Breadcrumbs: FC = (props) => {
  const router: any = useRouter();
  const { categoryBreadcrumb, categoryTreeNested, setCategoryBreadcrumb } =
    useContext(shopConetxt);
  const selectBreadcrumbItem = (id: any, categoryName: string) => {
    const flatCat = getFlattenCategory(categoryTreeNested);
    const breadCrumbInfo = createBreadcrumb(id, flatCat);
    setCategoryBreadcrumb(breadCrumbInfo);
    const routerObject: any = { ...router.query };
    routerObject.id = id;
    routerObject.cateName = categoryName;
    const result = "?" + new URLSearchParams(routerObject).toString();
    Router.push(`/products/${id}${result}`);
  };

  return (
    <Breadcrumb separator=">">
      {categoryBreadcrumb &&
        categoryBreadcrumb.map((item: any, idx: number) => (
          <Breadcrumb.Item
            key={idx}
            onClick={() => selectBreadcrumbItem(item.category_id, item.name)}
          >
            <a>{item.name}</a>
          </Breadcrumb.Item>
        ))}
    </Breadcrumb>
  );
};

export default Breadcrumbs;