"use client";
import SideBarNavBarMobile from "@comp/Navbar/SideBarNavBarMobile/page";
import AppContext from "@ctx/AppContext";
import BottomSheetFilter from "plugins/bottomSheet/BottomSheetFilter";
import React, { useContext, useEffect, useState } from "react";

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

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

  useEffect(() => {
    CTX.fetchProducts(
      props.id,
      props.selectedBrands,
      props.isChecked,
      props.rangePrice,
      props.rangePrice,
      props.sortBy,
      props.isRangePrice
    );
  }, [props.sortBy]);

  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
              width="20"
              height="20"
              viewBox="0 0 300 300"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
              className=" opacity-30"
            >
              <path
                d="M175.462 261.712C173.18 261.701 170.943 261.075 168.987 259.9L127.312 234.9C122.624 232.071 118.743 228.082 116.044 223.318C113.344 218.554 111.917 213.175 111.9 207.7V151.137C111.911 147.145 110.67 143.249 108.35 140L50.1623 58.2247C48.8035 56.3369 47.9927 54.1105 47.8193 51.791C47.6459 49.4716 48.1166 47.1493 49.1795 45.0804C50.2424 43.0116 51.8561 41.2765 53.8427 40.0668C55.8292 38.857 58.1113 38.2195 60.4373 38.2247H239.562C241.89 38.215 244.175 38.8497 246.164 40.0585C248.154 41.2673 249.77 43.003 250.833 45.0736C251.897 47.1441 252.367 49.4686 252.191 51.7897C252.015 54.1108 251.201 56.338 249.837 58.2247L191.65 140C189.326 143.248 188.08 147.143 188.087 151.137V249.062C188.084 252.412 186.754 255.624 184.387 257.995C182.021 260.366 178.812 261.702 175.462 261.712ZM60.4373 50.7872L118.525 132.75C122.363 138.111 124.418 144.544 124.4 151.137V207.687C124.408 211.005 125.272 214.264 126.907 217.15C128.543 220.036 130.895 222.451 133.737 224.162L175.412 249.162L175.587 151.125C175.573 144.53 177.633 138.098 181.475 132.737L239.65 50.9622L60.4373 50.7872Z"
                fill="black"
              />
            </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 ">
          {/* <div
            className="bg-primary-500 p-1 px-2 mx-1 rounded-full"
            onClick={() => props.setSortBy(1)}
          >
            <p className="mb-0 text-sm text-white">پربازدید ترین ها</p>
          </div>
          <div
            className="bg-primary-500 p-1 px-2 mx-1 rounded-full"
            onClick={() => props.setSortBy(2)}
          >
            <p className="mb-0 text-sm text-white">پربازدید ها</p>
          </div>
          <div
            className="bg-primary-500 p-1 px-2 mx-1 rounded-full"
            onClick={() => props.setSortBy(3)}
          >
            <p className="mb-0 text-sm text-white"> ترین ها</p>
          </div>
          <div
            className="bg-primary-500 p-1 px-2 mx-1 rounded-full"
            onClick={() => props.setSortBy(4)}
          >
            <p className="mb-0 text-sm text-white">پربازدید ها</p>
          </div>
          <div
            className="bg-primary-500 p-1 px-2 mx-1 rounded-full"
            onClick={() => props.setSortBy(5)}
          >
            <p className="mb-0 text-sm text-white">پربازدید ترین </p>
          </div> */}

          <div
            className={`w-fit  rounded-full px-2 mx-2 tr03 ${
              props.sortBy == 1 ? "bg-primary-600" : " opacity-60 "
            }`}
            onClick={() => props.setSortBy(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-2 tr03 ${
              props.sortBy == 2 ? "bg-primary-600" : " opacity-60 "
            }`}
            onClick={() => props.setSortBy(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-2 tr03 ${
              props.sortBy == 3 ? "bg-primary-600" : " opacity-60 "
            }`}
            onClick={() => props.setSortBy(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-2 tr03 ${
              props.sortBy == 4 ? "bg-primary-600" : " opacity-60 "
            }`}
            onClick={() => props.setSortBy(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-2 tr03 ${
              props.sortBy == 5 ? "bg-primary-600" : " opacity-60 "
            }`}
            onClick={() => props.setSortBy(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;
