"use client";
import AppContext from "@ctx/AppContext";
import { usePathname, useRouter, useSearchParams } from "next/navigation";
import BottomSheetFilter from "plugins/bottomSheet/BottomSheetFilter";
import { useContext, useEffect, useState } from "react";

const FilterCategoryMobile = (props) => {
  const CTX = useContext(AppContext);
  const pageGetProducts = CTX.state.pageGetProducts;

  const [trendFilter, setTrendFilter] = useState(false);

  // useEffect(() => {
  //   if (props.sortBy != -1) {
  //     CTX.fetchProducts(
  //       0,
  //       props.id[0] != 0 ? props.id[0] : "",
  //       props.selectedBrands,
  //       props.isChecked,
  //       props.rangePrice,
  //       props.rangePrice,
  //       props.sortBy != -1 ? props.sortBy : "",
  //       props.isRangePrice
  //     );
  //   }
  // }, [props.sortBy]);

  const searchParams = useSearchParams();
  const pathname = usePathname();
  const router = useRouter();

  const sort = (by) => {
    const params = new URLSearchParams(searchParams.toString());
    params.set("sortBy", by);
    params.set("page", "0");
    router.push(`${pathname}?${params}`);
  };

  return (
    <>
      <div className="flex mb-3 mt-5 px-3">
        <div
          className="w-full flex rtl justify-center"
          onClick={() => CTX.setBottomSheetFilterOpen(true)}
        >
          <div>
            <svg
              width="20"
              height="20"
              viewBox="0 0 238 214"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
              className="mx-2 opacity-30"
            >
              <path
                d="M31.5 107V7M206.5 207V169.5M31.5 207V157M206.5 119.5V7M119 44.5V7M119 207V94.5"
                stroke="black"
                stroke-width="12.5"
                stroke-linecap="round"
              />
              <path
                d="M31.5 157C45.3071 157 56.5 145.807 56.5 132C56.5 118.193 45.3071 107 31.5 107C17.6929 107 6.5 118.193 6.5 132C6.5 145.807 17.6929 157 31.5 157Z"
                stroke="black"
                stroke-width="12.5"
                stroke-linecap="round"
              />
              <path
                d="M119 94.5C132.807 94.5 144 83.3071 144 69.5C144 55.6929 132.807 44.5 119 44.5C105.193 44.5 94 55.6929 94 69.5C94 83.3071 105.193 94.5 119 94.5Z"
                stroke="black"
                stroke-width="12.5"
                stroke-linecap="round"
              />
              <path
                d="M206.5 169.5C220.307 169.5 231.5 158.307 231.5 144.5C231.5 130.693 220.307 119.5 206.5 119.5C192.693 119.5 181.5 130.693 181.5 144.5C181.5 158.307 192.693 169.5 206.5 169.5Z"
                stroke="black"
                stroke-width="12.5"
                stroke-linecap="round"
              />
            </svg>
          </div>
          <p className="mb-0 text-sm text-gray-500">فیلتر ها</p>
        </div>
        <div
          className="w-full flex rtl justify-center"
          onClick={() => setTrendFilter(!trendFilter)}
        >
          <div>
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="20"
              height="20"
              viewBox="0 0 16 16"
              className="mx-2 opacity-30"
              fill="none"
            >
              <path
                fill="currentColor"
                d="M3.5 2.5a.5.5 0 0 0-1 0v8.793l-1.146-1.147a.5.5 0 0 0-.708.708l2 1.999l.007.007a.497.497 0 0 0 .7-.006l2-2a.5.5 0 0 0-.707-.708L3.5 11.293zm3.5 1a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5M7.5 6a.5.5 0 0 0 0 1h5a.5.5 0 0 0 0-1zm0 3a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1zm0 3a.5.5 0 0 0 0 1h1a.5.5 0 0 0 0-1z"
              />
            </svg>
          </div>
          <p className="mb-0 text-sm text-gray-500"> مرتب سازی</p>
        </div>
      </div>

      {trendFilter ? (
        <div className=" flex overflow-auto whitespace-nowrap rtl px-2 mb-5 mt-5 hide-scrollBar ">
          <div
            className={`w-fit  rounded-full px-2 mx-1 tr03 ${
              props.sortBy == 1 ? "bg-primary-600" : " opacity-60 "
            }`}
            onClick={() => sort(1)}
          >
            <p
              className={`mb-0 lg:text-sm xl:text-base text-sm  ${
                props.sortBy == 1 ? "text-white" : " text-gray-500"
              }`}
            >
              پربازدید ترین
            </p>
          </div>
          <div
            className={`w-fit  rounded-full px-2 mx-1 tr03 ${
              props.sortBy == 2 ? "bg-primary-600" : " opacity-60 "
            }`}
            onClick={() => sort(2)}
          >
            <p
              className={`mb-0 lg:text-sm xl:text-base text-sm  ${
                props.sortBy == 2 ? "text-white" : " text-gray-500"
              }`}
            >
              محبوب ترین
            </p>
          </div>
          <div
            className={`w-fit  rounded-full px-2 mx-1 tr03 ${
              props.sortBy == 3 ? "bg-primary-600" : " opacity-60 "
            }`}
            onClick={() => sort(3)}
          >
            <p
              className={`mb-0 lg:text-sm xl:text-base text-sm  ${
                props.sortBy == 3 ? "text-white" : " text-gray-500"
              }`}
            >
              گران ترین
            </p>
          </div>
          <div
            className={`w-fit  rounded-full px-2 mx-1 tr03 ${
              props.sortBy == 4 ? "bg-primary-600" : " opacity-60 "
            }`}
            onClick={() => sort(4)}
          >
            <p
              className={`mb-0 lg:text-sm xl:text-base text-sm  ${
                props.sortBy == 4 ? "text-white" : " text-gray-500"
              }`}
            >
              ارزان ترین
            </p>
          </div>
          <div
            className={`w-fit  rounded-full px-2 mx-1 tr03 ${
              props.sortBy == 5 ? "bg-primary-600" : " opacity-60 "
            }`}
            onClick={() => sort(5)}
          >
            <p
              className={`mb-0 lg:text-sm xl:text-base text-sm  ${
                props.sortBy == 5 ? "text-white" : " text-gray-500"
              }`}
            >
              پرفروش ترین
            </p>
          </div>
        </div>
      ) : (
        ""
      )}

      <BottomSheetFilter data={props} />
    </>
  );
};

export default FilterCategoryMobile;
