import EditImageColors from "@/components/images/edit/EditImageColors";
import EditImageForm from "@/components/images/edit/EditImageForm";
import EditImagePalettes from "@/components/images/edit/EditImagePalettes";
import EditImageVariants from "@/components/images/edit/EditImageVariants";
import prisma from "@/lib/prisma";

export default async function ImagesEditPage({ params }: { params: { id: string } }) {
  const { id } = await params;

  const image = await prisma.image.findUnique({
    where: {
      id,
    },
    include: {
      album: true,
      artist: true,
      colors: true,
      extractColors: true,
      metadata: true,
      pixels: true,
      stats: true,
      theme: true,
      variants: true,
      palettes: {
        include: {
          items: true
        }
      }
    }
  });

  const artists = await prisma.artist.findMany({ orderBy: { createdAt: "asc" } });
  const albums = await prisma.album.findMany({ orderBy: { createdAt: "asc" } });

  return (
    <div>
      <h1 className="text-2xl font-bold mb-4">Edit image</h1>
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
        <div>
          {image ? <EditImageForm image={image} artists={artists} albums={albums} /> : 'Image not found...'}
        </div>
        <div className="space-y-6">
          <div>
            {image && <EditImageColors extractColors={image.extractColors} colors={image.colors} />}
          </div>
          <div>
            {image && <EditImagePalettes palettes={image.palettes} />}
          </div>
          <div>
            {image && <EditImageVariants variants={image.variants} />}
          </div>
        </div>
      </div>
    </div>
  );
}