import React, { Suspense } from "react";
import { FilledStarsIconSmall } from "../../components/icons/marketPlaceIcons";
import { Canvas } 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;
  AssetID: string;
}

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

const savedTheme: string | null = localStorage.getItem("theme");

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

const AssetPreview: React.FC<AssetPreviewProps> = ({
  selectedCard,
  setSelectedCard,
  modelUrl,
}) => {
  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
              camera={{ fov: 75 }}
              gl={{
                preserveDrawingBuffer: true,
              }}
              onCreated={({ scene }) => {
                scene.background = new THREE.Color(
                  savedTheme === "dark" ? 0x19191d : 0xfcfdfd
                );
              }}
            >
              <Suspense fallback={<Ui />}>
                {selectedCard.assetName && modelUrl && (
                  <GltfLoader
                    fromServer={modelUrl}
                    assetId={selectedCard?.AssetID}
                  />
                )}
                <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">
                <FilledStarsIconSmall />
                {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 */}
          <button
            id="asset-back-buttton"
            className="closeButton"
            onClick={() => setSelectedCard(null)}
          >
            {`<-back`}
          </button>
        </div>
      </div>
    </div>
  );
};

export default AssetPreview;