"use client";
import React, { useState, useEffect } from "react";
import Image from "next/image";
import Link from "next/link";
import "./ProductPage.css";
import { Button } from "@/components/ui/button";
import { MdOutlineAddShoppingCart } from "react-icons/md";
import { MdFavoriteBorder } from "react-icons/md";
import { FaBalanceScale } from "react-icons/fa";
import { FaRegStar } from "react-icons/fa";
import { FaStar } from "react-icons/fa";

const ProductPage = ({ productId }: any) => {
  // console.log(productId);
  const [selectedImage, setSelectedImage] = useState(0);
  const [quantity, setQuantity] = useState(1);

  const images = [
    "https://ih1.redbubble.net/image.2997405810.0746/ssrco,slim_fit_t_shirt,womens,101010:01c5ca27c6,front,square_product,600x600.jpg",
    "https://ih1.redbubble.net/image.2997405810.0746/ssrco,slim_fit_t_shirt,flatlay,101010:01c5ca27c6,front,wide_portrait,750x1000-bg,f8f8f8.jpg",
  ];
  const [data, setData] = useState([]);
  const [product, setProduct] = useState('');

  useEffect(() => {
    const fetchData = async () => {
      const request = await fetch(process.env.NEXT_PUBLIC_API_URL +"/products?populate=*", {
        method: "GET",
        headers: {
          Authorization: "Bearer " + process.env.NEXT_PUBLIC_API_TOKEN
        }
      });
      const res = await request.json();
      // console.log(res.data);
      console.log(res.data[1].image.url);
      setData(res.data);
      setProduct(res.data[parseInt(productId)]?.image?.url);
    };
    fetchData();
  }, [productId]);

  return (
    <div className="product">
      <div className="left">
        <div className="images">
          <div className="product-image">
            <Image
              src={`${process.env.NEXT_PUBLIC_UPLOAD_URL+product}`}
              fill
              className=""
              alt="Shirt Mockup"
              style={{ objectFit: "cover" }}
              onClick={(e) => setSelectedImage(0)}
              />
            {/* <Image
              src={images[0]}
              fill
              className=""
              alt="Shirt Mockup"
              style={{ objectFit: "cover" }}
              onClick={(e) => setSelectedImage(0)}
            /> */}
          </div>
          <div className="product-image">
            {/* <Image
              src={images[1]}
              fill
              className=""
              alt="Shirt Mockup"
              style={{ objectFit: "cover" }}
              onClick={(e) => setSelectedImage(1)}
            /> */}
          </div>
        </div>
        <div className="mainImage">
          <div className="main-image">
            <Image
              src={data[selectedImage]}
              fill
              className=""
              style={{ objectFit: "cover" }}
              alt="Profile picture"
            />
          </div>
        </div>
      </div>
      <div className="right">
        <h1 className="font-bold text-3xl">Title</h1>
        <span className="price text-[#F45B1E]">$199</span>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi, culpa
          temporibus. Blanditiis, perferendis tempore praesentium voluptatibus
          et, consectetur similique natus facilis reiciendis eum pariatur rem
          vitae est aliquid, debitis corporis.
        </p>
        <div className="quantity">
          {/* If quantity is at 1 then it stays at 1, otherwise it will subtract by 1 */}
          <Button
            className="bg-slate-600 text-xl"
            onClick={() => setQuantity((prev) => (prev === 1 ? 1 : prev - 1))}
          >
            -
          </Button>
          <div>{quantity}</div>
          <Button
            className="bg-slate-600 text-lg"
            onClick={() => setQuantity((prev) => prev + 1)}
          >
            +
          </Button>
        </div>
        <Button className="add bg-[#F45B1E] font-bold">
          <MdOutlineAddShoppingCart /> ADD TO CART
        </Button>
        <div className="link">
            {/* <div className="item text-emerald-400"><MdFavoriteBorder /> ADD TO WISHLIST</div> */}
            {/* if in wishlist, then display <FaStar /> else <FaRegStar /> */}  
            <div className="item text-yellow-300"><FaRegStar /> ADD TO WISHLIST</div>
            <div className="item text-sky-400"><FaBalanceScale /> ADD TO COMPARE</div>
        </div>
        <div className="info">
          <span>Vender: Polo</span>
          <span>Product Type: T-Shirt</span>
          <span>Tag: T-Shirt, Men, Top </span>
        </div>
        <hr />
        <div className="details">
          <span className="font-bold">DESCRIPTION</span>
          <hr />
          <span className="font-bold">ADDITIONAL INFORMATION</span>
          <hr />
          <span className="font-bold">FAQ</span>
        </div>
      </div>
    </div>
  );
};

export default ProductPage;
