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 your model...
    </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} is used in factories to improve efficiency and production speed It is designed to handle heavy workloads and perform repetitive tasks with precision. Many industries rely on this machine to manufacture products quickly and accurately. It reduces human effort and minimizes errors in the production process. Regular maintenance is required to keep the machine in good working condition.With advanced technology, this machine continues to enhance industrial operations and increase productivity.`}
            </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;