import HeaderLink from '../../Components/Ui/HeaderLink'
import ProductCard from '../../Components/Products/ProductCard'
import React, { useState, useEffect } from "react";
import { MdOutlineCancel } from "react-icons/md";
import { Drawer, Pagination, Select, Spin } from "antd";
import { IoIosArrowForward } from "react-icons/io";
import { useSearchParams } from "react-router-dom";
import { useFilterStateState } from '../../zustand/Filter';
import FilterSection from './FilterSection';
import SearchButton from '../../Components/Utils/Search/SearchButton';
import { FaFilter } from "react-icons/fa";
import { useGetProducts } from '../../api/products';
import Spinner from '../../Components/Utils/Loading/Spinner';

const Page = () => {
    const { Filter, setFilter } = useFilterStateState();
    const [searchParams, setSearchParams] = useSearchParams();
    const type_param = searchParams.get('type');
    const [type, setType] = useState(type_param);
    const [currentPage, setCurrentPage] = useState(1);
    const [totalItems, setTotalItems] = useState(0);
    const [perPage, setPerPage] = useState(10);
    const [noDataFound, setNoDataFound] = useState(false);
    const [openSearch, setOpenSearch] = useState(false);
    const categories = Filter?.filter((item:any)=> item.select !== true)?.map((item:any)=> item?.id)

    const { data , isLoading } = useGetProducts({
      type: type,
      page: currentPage,
      category_id:categories
    });
    
    // useEffect(() => {
    //   setType(type_param);
    // }, [type_param]);


    // const handel_filter_delete = (index: number) => {
    //   setFilter(Filter.filter((_: any, i: number) => i !== index));
    // };

    // const handel_filter_reset = () => {
    //   setFilter([]);
    // };

    // const handleChange = (value: string) => {
    //   const newArray = Filter?.filter((item: any) => item.select !== true);
    //   setFilter([
    //     ...newArray,
    //     { name: value, index: Filter.length, select: true },
    //   ]);
    //   if (type_param) {
    //     searchParams.delete('type');
    //     setSearchParams(searchParams);
    //   }
    //   setType(value);
    // };

    const handlePageChange = (page: number) => {
      setCurrentPage(page);
    };

    const [open, setOpen] = useState(false);

    const showDrawer = () => {
      setOpen(true);
    };

    const onClose = () => {
      setOpen(false);
    };

    // const products = Filter?.filter((item:any)=> item.select !== true)?.map((item:any)=> item?.id)
    
    //   console.log(products);
      
    useEffect(() => {
      if (data?.meta) {
        setTotalItems(data.meta?.total);
        setPerPage(data.meta?.per_page);
      }
    }, [data]);


    const [t] = useTranslation();
  return (
    <div className='products'>
        <HeaderLink text='Products'/>
      <main>
        <div className="products_left">
          <FilterSection isLoading={isLoading}/>
        </div>
        <div className="products_Right">
          <header>
            <div className="filter_menu show_on_responsive">
              <button className="button" onClick={showDrawer}>
                <FaFilter/>
                {t("Filters")}
              </button>
              <Drawer
                style={{ minHeight: "100vh" }}
                onClose={onClose}
                open={open}
              >
                <FilterSection isLoading={isLoading} />
                <div className="filtered_items"></div>
              </Drawer>
            </div>

          </header>
          <main>
          <div className="product_container">
            {
            isLoading ? <Spinner/> : 
            data?.data?.map((item:any)=>(
              <ProductCard
                data={item}
              />
            ))}
          </div>
          </main>
          <div className="Pagination">
            <Pagination
              current={currentPage}
              total={totalItems}
              pageSize={perPage}
              onChange={handlePageChange}
            />
          </div>
        </div>
      </main>
    </div>
  )
}

export default Page