"use client";
import React, {useEffect, useState} from "react";
import MenuCard from "@/components/ui/MenuCard/MenuCard";
import { useParams } from "next/navigation";
import Product from "@/../public/batch1/files_list.json";
import Image from "next/image";
import 'dotenv/config';

const Products = () => {
  const catID = useParams();
  const [maxPrice, setMaxPrice] = useState(100);
  const [sort, setSort] = useState("asc");
  const [data, setData] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
      const response = await fetch(process.env.NEXT_PUBLIC_API_URL +"/products?populate=*", {
        method: "GET",
        headers: {
          Authorization: "Bearer " + process.env.NEXT_PUBLIC_API_TOKEN
        }
      });
      // const response = await fetch(process.env.NEXT_PUBLIC_Flask_URL +"/images", {
      //   method: "GET",
      // });
      const data = await response.json();

      // console.log(data);

      // Flask
      // console.log(data.files);
      // setData(data.files);

      // Strapi
      console.log(data.data);
      // console.log(data.data[0].image.url);
      setData(data.data);
    };
    fetchData();
  }, []);


  return (
    <div className="products">
      {/* <div className="left">
        <div className="filterItem">
          <h2>Product Categories</h2>
          <div className="inputItem">
            <input type="checkbox" id="1" value={1} />
            <label htmlFor="1">Men</label>
          </div>
          <div className="inputItem">
            <input type="checkbox" id="2" value={2} />
            <label htmlFor="2">Women</label>
          </div>
          <div className="inputItem">
            <input type="checkbox" id="3" value={3} />
            <label htmlFor="3">Boys</label>
          </div>
          <div className="inputItem">
            <input type="checkbox" id="4" value={4} />
            <label htmlFor="4">Girls</label>
          </div>
        </div>
        <div className="filterItem">
          <h2>Filter by Price</h2>
          <div className="inputItem">
            <span>0</span>
            <input type="range" min={0} max={100} onChange={(e) => setMaxPrice(parseInt(e.target.value))} />
            <span>{maxPrice}</span>
          </div>
        </div>
        <div className="filterItem">
          <h2>Sort by</h2>
          <div className="inputItem">
            <span>0</span>
            <input type="radio" id="asc" value="asc" name="price" onChange={(e) => setSort("asc")} />
            <label htmlFor="asc">Price (Lowest first)</label>
          </div>
          <div className="inputItem">
            <span>0</span>
            <input type="radio" id="desc" value="desc" name="price" onChange={(e) => setSort("desc")}/>
            <label htmlFor="desc">Price (Highest first)</label>
          </div>
        </div>
      </div> */}
      <div className="right">
        {/* <Image
          src="/white_logo.png"
          width={64}
          height={64}
          className="rounded-full md:hidden"
          alt="Profile picture"
        /> */}
      </div>
      <MenuCard Menu={data} />
      {/* <button onClick={GetData} className="bg-blue-500 text-white px-4 py-2 rounded-md">Get Data</button> */}
    </div>
  );
};

export default Products;