import { defineField, defineType } from "sanity";
import { Images } from "lucide-react";

export default defineType({
  name: "gallery",
  title: "Image Gallery",
  type: "object",
  icon: Images,
  fields: [
    defineField({
      name: "layout",
      title: "Layout Style",
      type: "string",
      options: {
        list: [
          { title: "2 Columns (Editorial Pair)", value: "2col" },
          { title: "3 Columns (Grid Showcase)", value: "3col" },
          { title: "Masonry Style", value: "masonry" },
        ],
        layout: "radio",
      },
      initialValue: "2col",
    }),
    defineField({
      name: "caption",
      title: "Gallery Caption",
      type: "string",
      description: "Optional caption for the entire photo gallery",
    }),
    defineField({
      name: "images",
      title: "Images",
      type: "array",
      of: [
        {
          type: "image",
          options: { hotspot: true },
          fields: [
            defineField({
              name: "alt",
              type: "string",
              title: "Alternative Text",
              description: "Important for accessibility and SEO",
            }),
            defineField({
              name: "caption",
              type: "string",
              title: "Caption",
            }),
          ],
        },
      ],
      validation: (Rule) => Rule.min(2).error("Please add at least 2 images to a gallery"),
    }),
  ],
  preview: {
    select: {
      images: "images",
      caption: "caption",
      layout: "layout",
    },
    prepare({ images, caption, layout }) {
      const count = images ? images.length : 0;
      return {
        title: caption || "Image Gallery",
        subtitle: `${count} image${count === 1 ? "" : "s"} (${layout || "2col"})`,
        media: images && images[0],
      };
    },
  },
});