import React, { useEffect, useState } from "react";
import Card from "./Card";
import AssetPreview from "./AssetPreview";
import RenderOverlay from "../../components/templates/Overlay";
import { fetchAssets } from "../../services/marketplace/fetchAssets";
interface ModelData {
  CreatedBy: string;
  animated: string | null;
  category: string;
  description: string;
  filename: string;
  isArchieve: boolean;
  modelfileID: string;
  tags: string;
  thumbnail: string;
  uploadDate: number;
  _id: string;
}

const CardsContainer: React.FC = () => {
  const [models, setModels] = useState<ModelData[]>([]);

  const array = [
    {
      id: 1,
      name: "Asset 1",
      uploadedOn: "12 Jan 23",
      price: 36500,
      rating: 4.5,
      views: 500,
    },
    {
      id: 2,
      name: "Asset 2",
      uploadedOn: "14 Jan 23",
      price: 45000,
      rating: 4.0,
      views: 500,
    },
    {
      id: 3,
      name: "Asset 3",
      uploadedOn: "15 Jan 23",
      price: 52000,
      rating: 4.8,
      views: 500,
    },
    {
      id: 4,
      name: "Asset 4",
      uploadedOn: "18 Jan 23",
      price: 37000,
      rating: 3.9,
      views: 500,
    },
    {
      id: 5,
      name: "Asset 5",
      uploadedOn: "20 Jan 23",
      price: 60000,
      rating: 5.0,
      views: 500,
    },
    {
      id: 6,
      name: "Asset 6",
      uploadedOn: "22 Jan 23",
      price: 46000,
      rating: 4.2,
      views: 500,
    },
    {
      id: 7,
      name: "Asset 7",
      uploadedOn: "25 Jan 23",
      price: 38000,
      rating: 4.3,
      views: 500,
    },
    {
      id: 8,
      name: "Asset 8",
      uploadedOn: "27 Jan 23",
      price: 41000,
      rating: 4.1,
      views: 500,
    },
    {
      id: 9,
      name: "Asset 9",
      uploadedOn: "30 Jan 23",
      price: 55000,
      rating: 4.6,
      views: 500,
    },
    {
      id: 10,
      name: "Asset 10",
      uploadedOn: "2 Feb 23",
      price: 49000,
      rating: 4.4,
      views: 500,
    },
    {
      id: 11,
      name: "Asset 11",
      uploadedOn: "5 Feb 23",
      price: 62000,
      rating: 5.0,
      views: 500,
    },
    {
      id: 12,
      name: "Asset 12",
      uploadedOn: "7 Feb 23",
      price: 53000,
      rating: 4.7,
      views: 500,
    },
  ];

  const [selectedCard, setSelectedCard] = useState<{
    assetName: string;
    uploadedOn: number;
    price: number;
    rating: number;
    views: number;
  } | null>(null);

  const handleCardSelect = (cardData: {
    assetName: string;
    uploadedOn: number;
    price: number;
    rating: number;
    views: number;
  }) => {
    setSelectedCard(cardData);
  };
  const getAllAssets = async () => {
    try {
      const assetsData = await fetchAssets();
      const reversedData = [...assetsData]?.reverse().slice(0, 8);
      setModels(reversedData);
    } catch (error) {
    } finally {
    }
  };
  useEffect(() => {
    getAllAssets();
  }, []);
  return (
    <div className="cards-container-container">
      <div className="header">Products You May Like</div>
      <div className="cards-wrapper-container">
        {/* {array.map((asset) => (
          <Card
            key={asset.id}
            assetName={asset.name}
            uploadedOn={asset.uploadedOn}
            price={asset.price}
            rating={asset.rating}
            views={asset.views}
            onSelectCard={handleCardSelect}
          />
        ))} */}
        {models.length > 0 &&
          models.map((assetDetail) => (
            <Card
              key={assetDetail._id}
              assetName={assetDetail?.filename}
              uploadedOn={assetDetail.uploadDate}
              price={36500}
              rating={4.5}
              views={500}
              onSelectCard={handleCardSelect}
              image={assetDetail.thumbnail}
            />
          ))}
        {/* <RenderOverlay> */}
        {selectedCard && (
          <AssetPreview
            selectedCard={selectedCard}
            setSelectedCard={setSelectedCard}
          />
        )}
        {/* </RenderOverlay> */}
      </div>
    </div>
  );
};

export default CardsContainer;