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,
  defaultOrderBy,
  searchResults,
  disableFilter = []
}) => {
  const router = useRouter();

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

  const filterRoute = () => {
    let filterRoute = [];
    let filterRoutePrefix = '?';
    if (selectedBrand) filterRoute.push(`brand=${selectedBrand}`);
    if (selectedCategory) filterRoute.push(`category=${selectedCategory}`);
    if (priceFrom) filterRoute.push(`price_from=${priceFrom}`);
    if (priceTo) filterRoute.push(`price_to=${priceTo}`);
    if (orderBy) filterRoute.push(`order_by=${orderBy}`);

    if (defaultRoute.includes('?')) filterRoutePrefix = '&';
    if (filterRoute.length > 0) {
      filterRoute = filterRoutePrefix + filterRoute.join('&');
    } else {
      filterRoute = '';
    }

    return defaultRoute + 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('');
    setPriceTo('');
    setOrderBy('');
  }

  const changeOrderBy = (value) => {
    if (orderBy == value) {
      setOrderBy('');
    } else {
      setOrderBy(value);
    }
  }

  return (
    <div className={`fixed w-full z-50 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}>
        {selectedBrand || selectedCategory || priceFrom || priceTo || orderBy ? (
          <button type="button" className="text-yellow_r-12 font-semibold ml-auto" onClick={reset}>
            Reset Filter
          </button>
        ) : ''}
        {!disableFilter.includes('orderBy') ? (
          <div>
            <label>Urutkan</label>
            <div className="flex gap-2 mt-2 overflow-x-auto w-full">
              <button 
                type="button" 
                className={"p-2 rounded border border-gray_r-6 flex-shrink-0" + (orderBy == 'price-asc' ? ' border-yellow_r-9 text-yellow_r-10' : '')} 
                onClick={() => changeOrderBy('price-asc')}
              >
                Harga Terendah
              </button>
              <button 
                type="button" 
                className={"p-2 rounded border border-gray_r-6 flex-shrink-0" + (orderBy == 'price-desc' ? ' border-yellow_r-9 text-yellow_r-10' : '')} 
                onClick={() => changeOrderBy('price-desc')}
              >
                Harga Tertinggi
              </button>
              <button 
                type="button" 
                className={"p-2 rounded border border-gray_r-6 flex-shrink-0" + (orderBy == 'popular' ? ' border-yellow_r-9 text-yellow_r-10' : '')} 
                onClick={() => changeOrderBy('popular')}
              >
                Populer
              </button>
              <button 
                type="button" 
                className={"p-2 rounded border border-gray_r-6 flex-shrink-0" + (orderBy == 'stock' ? ' border-yellow_r-9 text-yellow_r-10' : '')} 
                onClick={() => changeOrderBy('stock')}
              >
                Ready Stock
              </button>
            </div>
          </div>
        ) : ''}
        {!disableFilter.includes('category') ? (
          <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>
        ) : ''}
        {!disableFilter.includes('brand') ? (
          <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>
        ) : ''}
        {!disableFilter.includes('price') ? (
          <div>
            <label>Harga</label>
            <div className="flex gap-x-4 mt-2 items-center">
              <input className="form-input" type="number" placeholder="Dari" value={priceFrom} onChange={(e) => setPriceFrom(e.target.value)}/>
              <span>&mdash;</span>
              <input className="form-input" type="number" placeholder="Sampai" 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>
      </form>
    </div>
  )
};

export default Filter;