import { getSingleArtwork } from "@/actions/artworks/getArtworks";
import { getCategoriesWithTags } from "@/actions/categories/getCategories";
import { getTags } from "@/actions/tags/getTags";
import ArtworkColors from "@/components/artworks/single/ArtworkColors";
import ArtworkDetails from "@/components/artworks/single/ArtworkDetails";
import ArtworkTimelapse from "@/components/artworks/single/ArtworkTimelapse";
import ArtworkVariants from "@/components/artworks/single/ArtworkVariants";
import DeleteArtworkButton from "@/components/artworks/single/DeleteArtworkButton";
import EditArtworkForm from "@/components/artworks/single/EditArtworkForm";

export default async function ArtworkSinglePage({ params }: { params: Promise<{ id: string }> }) {
  const { id } = await params;

  const item = await getSingleArtwork(id);

  const categories = await getCategoriesWithTags();
  const tags = await getTags();

  if (!item) return <div>Artwork with this id not found</div>

  return (
    <div>
      <h1 className="text-2xl font-bold mb-4">Edit artwork</h1>
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
        <div className="space-y-6">
          {item ? <EditArtworkForm artwork={item} tags={tags} categories={categories} /> : 'Artwork not found...'}
          <div>
            {item && <DeleteArtworkButton artworkId={item.id} />}
          </div>
          <div>
            {item && <ArtworkTimelapse artworkId={item.id} timelapse={item.timelapse} />}
          </div>
        </div>
        <div className="space-y-6">
          <div>
            {item && <ArtworkColors colors={item.colors} artworkId={item.id} />}
          </div>
          <div>
            {item && <ArtworkDetails artwork={item} />}
          </div>
          <div>
            {item && <ArtworkVariants artworkId={item.id} variants={item.variants} />}
          </div>
        </div>
      </div>
    </div>
  );
}