import { useRouter } from "next/router";
import { useEffect, useState } from "react";
import CloseIcon from "../icons/close.svg";

const Filter = ({ 
  isActive,
  closeFilter,
  defaultRoute,
  defaultPriceFrom,
  defaultPriceTo,
  defaultCategory,
  defaultBrand,
  searchResults
}) => {
  const router = useRouter();

  const [priceFrom, setPriceFrom] = useState(defaultPriceFrom);
  const [priceTo, setPriceTo] = useState(defaultPriceTo);
  const [selectedCategory, setSelectedCategory] = useState(defaultCategory);
  const [selectedBrand, setSelectedBrand] = useState(defaultBrand);
  const [categories, setCategories] = useState([]);
  const [brands, setBrands] = useState([]);

  const filterRoute = () => {
    let filterRoute = defaultRoute;
    if (selectedBrand) filterRoute += `&brand=${selectedBrand}`;
    if (selectedCategory) filterRoute += `&category=${selectedCategory}`;
    if (priceFrom > 0) filterRoute += `&price_from=${priceFrom}`;
    if (priceTo > 0) filterRoute += `&price_to=${priceTo}`;
    return filterRoute;
  }

  useEffect(() => {
    const filterCategory = searchResults.facet_counts.facet_fields.category_name_str.filter((category, index) => {
      if (index % 2 == 0) {
        const productCountInCategory = searchResults.facet_counts.facet_fields.category_name_str[index + 1];
        if (productCountInCategory > 0) return category;
      }
    });
    setCategories(filterCategory);

    const filterBrand = searchResults.facet_counts.facet_fields.brand_str.filter((brand, index) => {
      if (index % 2 == 0) {
        const productCountInBrand = searchResults.facet_counts.facet_fields.brand_str[index + 1];
        if (productCountInBrand > 0) return brand;
      }
    });
    setBrands(filterBrand);
  }, [searchResults]);

  const submit = (e) => {
    e.preventDefault();
    closeFilter();
    router.push(filterRoute(), undefined, { scroll: false });
  }

  const reset = () => {
    setSelectedBrand('');
    setSelectedCategory('');
    setPriceFrom(0);
    setPriceTo(0);
  }

  return (
    <div className={`fixed w-full z-[60] py-6 px-4 ring ring-gray-300 bg-white rounded-t-3xl idt-transition ${isActive ? 'bottom-0' : 'bottom-[-100%]'}`}>
      <div className="flex justify-between items-center mb-5">
        <h2 className="text-xl font-semibold">Filter Produk</h2>
        <button onClick={closeFilter}>
          <CloseIcon className="w-7" />
        </button>
      </div>
      <form className="flex flex-col gap-y-4" onSubmit={submit}>
        <div>
          <label>Kategori</label>
          <select className="form-input mt-2" value={selectedCategory} onChange={(e) => setSelectedCategory(e.target.value)}>
            <option value="">Pilih kategori...</option>
            {categories?.map((category, index) => (
              <option key={index} value={category}>{category}</option>
            ))}
          </select>
        </div>
        <div>
          <label>Brand</label>
          <select className="form-input mt-2" value={selectedBrand} onChange={(e) => setSelectedBrand(e.target.value)}>
            <option value="">Pilih brand...</option>
            {brands?.map((brand, index) => (
              <option key={index} value={brand}>{brand}</option>
            ))}
          </select>
        </div>
        <div>
          <label>Harga</label>
          <div className="flex gap-x-4 mt-2 items-center">
            <input className="form-input" value={priceFrom} onChange={(e) => setPriceFrom(e.target.value)}/>
            <span>&mdash;</span>
            <input className="form-input" value={priceTo} onChange={(e) => setPriceTo(e.target.value)}/>
          </div>
        </div>
        <button type="submit" className="btn-yellow font-semibold mt-2 w-full">
          Terapkan Filter
        </button>
        {selectedBrand || selectedCategory || priceFrom > 0 || priceTo > 0 ? (
          <button type="button" className="btn-light font-semibold w-full" onClick={reset}>
            Reset Filter
          </button>
        ) : ''}
      </form>
    </div>
  )
};

export default Filter;