import React from "react";
import { useDroppedDecal, useSelectedItem } from "../../../../../store/builder/store";

export const RenderAsset: React.FC<{ asset: AssetProp | DecalProp; index: number }> = ({ asset, index }) => {
  const { setSelectedItem } = useSelectedItem();
  const { setDroppedDecal } = useDroppedDecal();

  if ("decalName" in asset) {
    return (
      <div key={`${index}-${asset.decalName}`} className="assets" id={asset.decalName} title={asset.decalName}>
        <img
          src={asset.decalImage}
          alt={asset.decalName}
          className="asset-image"
          onPointerDown={() => {
            setDroppedDecal({
              category: asset.category,
              decalName: asset.decalName,
              decalImage: asset.decalImage,
              decalId: asset.id,
            })
          }}
        />
        <div className="asset-name">
          {asset.decalName
            .split("_")
            .map((w) => w.charAt(0).toUpperCase() + w.slice(1))
            .join(" ")}
        </div>
      </div>
    );
  }

  return (
    <div key={`${index}-${asset.filename}`} className="assets" id={asset.filename} title={asset.filename}>
      <img
        src={asset.thumbnail}
        alt={asset.filename}
        className="asset-image"
        onPointerDown={() =>
          setSelectedItem({
            name: asset.filename,
            id: asset.AssetID,
            type: asset.type === "undefined" ? undefined : asset.type,
            category: asset.category,
            subType: asset.subType,
          })
        }
      />
      <div className="asset-name">
        {asset.filename
          .split("_")
          .map((w) => w.charAt(0).toUpperCase() + w.slice(1))
          .join(" ")}
      </div>
    </div>
  );
};
