import CategorySection from "@/components/home/CategorySection";
import React from "react";
import { ImArrowLeft2 } from "react-icons/im";
import { MdKeyboardArrowRight } from "react-icons/md";
import { useRouter } from "next/router";
import Link from "next/link";
import axios from "axios";
import { useSelector } from "react-redux";
import { RootState } from "@/Redux/store";
import Head from "next/head";
import Image from "next/image";
// import { api_interceptor } from "@/interceptor/interceptor";
// import { getData ,postData } from "@/FetchNodeService";

export default function Sell() {
  const router = useRouter();
  const selectedCategory = useSelector((state: RootState) => state.category);

  const [categoryData, setCategoryData] = React.useState<any[]>([]);

  const [subCategoryData, setSubCategoryData] = React.useState<any[]>([]);

  // React.useEffect(() => {
  //   console.warn(selectedCategory)
  //   const getCategories = async () => {
  //     try {
  //       const response = await axios.get('https://api.jazzagain.com/public/index.php/api/getCategories');
  //       setCategoryData(response.data.categories);
  //       // console.log('Response: sell.tsx', response.data.categories);
  //     } catch (error) {
  //       console.error('Error:', error);
  //     }
  //   }
  //   getCategories();
  // }, []);

  React.useEffect(() => {
    const getSub = async () => {
      try {
        const subcategoriesResponse = await axios.get(
          `https://api.jazzagain.com/public/index.php/api/getSubCategories/${selectedCategory.selectedCategoryID}`
        );
        console.log("SUB_CATS", subcategoriesResponse.data);

        // Sort subcategories alphabetically by subCategoryName
        const sortedSubCategories =
          subcategoriesResponse.data.subCategories.sort((a: any, b: any) => {
            const nameA = a.subCategoryName
              .replace(/[^a-zA-Z0-9 ]/g, "")
              .toUpperCase();
            const nameB = b.subCategoryName
              .replace(/[^a-zA-Z0-9 ]/g, "")
              .toUpperCase();
            if (nameA < nameB) {
              return -1;
            }
            if (nameA > nameB) {
              return 1;
            }

            // names must be equal
            return 0;
          });

        setSubCategoryData(sortedSubCategories);
      } catch (err) {
        console.log(err);
      }
    };
    getSub();
  }, [selectedCategory]);

  return (
    <>
      <Head>
        <link rel="shortcut icon" href="/images/jazzagian-logo.png" />
        <script
          dangerouslySetInnerHTML={{
            __html: `
              !function(f,b,e,v,n,t,s)
              {if(f.fbq)return;n=f.fbq=function(){n.callMethod?
              n.callMethod.apply(n,arguments):n.queue.push(arguments)};
              if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
              n.queue=[];t=b.createElement(e);t.async=!0;
              t.src=v;s=b.getElementsByTagName(e)[0];
              s.parentNode.insertBefore(t,s)}(window, document,'script',
              'https://connect.facebook.net/en_US/fbevents.js');
              fbq('init', '360254480441103');
              fbq('track', 'sell');
            `,
          }}
        />
        <noscript>
          <Image
            height="1"
            width="1"
            alt="facebook link"
            style={{ display: "none" }}
            src="https://www.facebook.com/tr?id=360254480441103&ev=sell&noscript=1"
          />
        </noscript>
      </Head>

      <div className="flex justify-between w-[75%] mx-auto my-4 cursor-pointer">
        <div
          className="flex items-center space-x-3"
          onClick={() => router.back()}
        >
          <ImArrowLeft2 size={20} />
          <span className="">BACK</span>
        </div>
        <div></div>
        <div></div>
      </div>
      <div>
        <CategorySection />

        <div className="w-[95%] sm:w-[75%] mx-auto my-[1rem] bg-white p-[1rem]">
          <div className="text-lg">
            {selectedCategory.selectedCategory
              ? selectedCategory.selectedCategory
              : "Women"}
          </div>
          <hr className="w-[95%] sm:w-[30%] border-b-0 border-gray-500 my-2" />
          {subCategoryData && subCategoryData.length >= 1 ? (
            subCategoryData.map((item) => {
              const encodedValue = encodeURIComponent(item.subCategoryName);
              return (
                <div key={item._id}>
                  <Link
                    href={`/upload?sell=${selectedCategory.selectedCategory}&sub=${encodedValue}`}
                    className="w-full lg:w-[30%] flex items-center justify-between text-gray-600"
                  >
                    <h3 className="bg-green">{item.subCategoryName}</h3>
                    <span>
                      <MdKeyboardArrowRight size={20} />
                    </span>
                  </Link>
                  <hr className="w-[30%] border-b-0 border-gray-300 my-2" />
                </div>
              );
            })
          ) : (
            <div>
              No subcategories available
              <hr className="w-[30%] border-b-0 border-gray-300 my-2" />
            </div>
          )}
          {/* {
            categoryData.map((item,index)=>{
              return (
                <>
                <div className="text-lg">{item.categoryName}</div>
                <hr className="w-[30%] border-b-0 border-gray-500 my-2" />
                {subCategoryData[index] && subCategoryData[index].length > 0 ? (
                  subCategoryData[index].map((subItem:any) => (
                    <>
                      <Link href={`/upload?sell=${item.categoryName}&sub=${subItem.subCategoryName}`} className="w-[30%] flex items-center justify-between text-gray-600">
                        <h3 className="">{subItem.subCategoryName}</h3>
                        <span>
                          <MdKeyboardArrowRight size={20} />
                        </span>
                      </Link>
                      <hr className="w-[30%] border-b-0 border-gray-300 my-2" />
                    </>
                  ))
                ) : (
                  <div>No subcategories available
                    <hr className="w-[30%] border-b-0 border-gray-300 my-2" />
                  </div>
                )}
                </>
              )
            })
          } */}

          {/* <div className="w-[30%] flex items-center justify-between text-gray-600">
            <h3 className="">Motorcycle</h3>
            <span>
              <MdKeyboardArrowRight size={20} />
            </span>
          </div>
          <hr className="w-[30%] border-b-0 border-gray-300 my-2" /> */}

          {/* <div className="w-[30%] flex items-center justify-between text-gray-600">
            <h3 className="">Scooter</h3>
            <span>
              <MdKeyboardArrowRight size={20} />
            </span>
          </div>
          <hr className="w-[30%] border-b-0 border-gray-300 my-2" />

          <div className="w-[30%] flex items-center justify-between text-gray-600">
            <h3 className="">Spare Parts</h3>
            <span>
              <MdKeyboardArrowRight size={20} />
            </span>
          </div>
          <hr className="w-[30%] border-b-0 border-gray-300 my-2" />

          <div className="w-[30%] flex items-center justify-between text-gray-600">
            <h3 className="">Bicycle</h3>
            <span>
              <MdKeyboardArrowRight size={20} />
            </span>
          </div>
          <hr className="w-[30%] border-b-0 border-gray-300 my-2" /> */}
        </div>
      </div>
    </>
  );
}
