import React, { Suspense, useEffect } from "react";
import assetImage from "../../assets/image/image.png";
import { FiileedStarsIconSmall } from "../../components/icons/marketPlaceIcons";
import { Canvas, useThree } from "@react-three/fiber";
import { ContactShadows, OrbitControls, Text } from "@react-three/drei";
import GltfLoader from "./GltfLoader";
import * as THREE from "three";

// Define the shape of the selected card
interface SelectedCard {
  assetName: string;
  uploadedOn: number;
  price: number;
  rating: number;
  views: number;
  description: string;
}

// Define the props type for AssetPreview
interface AssetPreviewProps {
  selectedCard: SelectedCard;
  setSelectedCard: React.Dispatch<React.SetStateAction<SelectedCard | null>>; // Type for setter function
}

function Ui() {
  return (
    <Text color="#6f42c1" anchorX="center" anchorY="middle" scale={0.3}>
      Loading preview...
    </Text>
  );
}

const AssetPreview: React.FC<AssetPreviewProps> = ({
  selectedCard,
  setSelectedCard,
}) => {
  // Ensure rating is a valid number between 0 and 5
  const rating = Math.max(
    0,
    Math.min(5, isNaN(selectedCard.rating) ? 0 : selectedCard.rating)
  );

  // Ensure that the rating is a valid positive integer for array length
  const starsArray = Array.from({ length: rating }, (_, index) => index);

  return (
    <div className="assetPreview-wrapper">
      <div className="assetPreview">
        <div className="image-preview">
          {/* <img src={assetImage} alt="" /> */}
          {/* Add canvas here */}
          <div className="canvas-container" style={{ height: "100%" }}>
            <Canvas
              flat
              shadows
              color="#FFFFFF"
              camera={{ fov: 75 }}
              gl={{
                preserveDrawingBuffer: true,
              }}
              onCreated={({ scene }) => {
                scene.background = new THREE.Color(0xffffff);
              }}
            >
              <Suspense fallback={<Ui />}>
                {selectedCard.assetName && (
                  <GltfLoader fromServer={selectedCard.assetName} />
                )}
                <OrbitControls minPolarAngle={0} maxPolarAngle={Math.PI / 2} />
                <ContactShadows
                  renderOrder={2}
                  frames={1}
                  resolution={1024}
                  scale={120}
                  blur={2}
                  opacity={0.4}
                  far={100}
                />
              </Suspense>
            </Canvas>
          </div>
        </div>

        <div className="asset-details-preview">
          <div className="organization">
            <div className="image">H</div>
            <div className="organization-details">
              <div className="organization-name">HERX FACTORY</div>
              <div className="follow">Follow +</div>
            </div>
          </div>

          {/* asset details */}
          <div className="asset-details">
            <div className="asset-name">{selectedCard.assetName}</div>
            <div className="asset-description">
              {`${selectedCard.description}`}
            </div>
            <div className="asset-review">
              <div className="asset-rating">
                <FiileedStarsIconSmall />
                {selectedCard.rating}
              </div>
              <div className="asset-view">{selectedCard.views} views</div>
            </div>
            <div className="asset-price">₹ {selectedCard.price}</div>
          </div>

          {/* buttons */}
          <div className="button-container">
            <div className="button">Add to cart</div>
            <div className="button">Buy now</div>
          </div>

          {/* close button */}
          <div className="closeButton" onClick={() => setSelectedCard(null)}>
            {`<-back`}
          </div>
        </div>
      </div>
    </div>
  );
};

export default AssetPreview;
