import type { CollectionConfig } from "payload";
import { lexicalEditor, BlocksFeature } from "@payloadcms/richtext-lexical";
import { allBlocks } from "../blocks/allBlocks";

export const Posts: CollectionConfig = {
  slug: "posts",
  admin: {
    useAsTitle: "title",
  },
  access: {
    read: () => true, // Publicly readable API
  },
  fields: [
    {
      name: "aiOptimizer",
      type: "ui",
      admin: {
        position: "sidebar",
        components: {
          Field: "@/src/payload/components/OptimizeButton#OptimizeButton",
        },
      },
    },
    {
      name: "title",
      type: "text",
      required: true,
    },
    {
      name: "slug",
      type: "text",
      required: true,
      unique: true,
      admin: {
        position: "sidebar",
      },
      hooks: {
        beforeValidate: [
          ({ value, data }) => {
            if (value) return value;
            if (data?.title) {
              return data.title
                .toLowerCase()
                .replace(/ /g, "-")
                .replace(/[^\w-]+/g, "");
            }
            return value;
          },
        ],
      },
    },
    {
      name: "description",
      type: "text",
      required: true,
    },
    {
      name: "date",
      type: "date",
      required: true,
    },
    {
      name: "tags",
      type: "array",
      required: true,
      fields: [
        {
          name: "tag",
          type: "text",
        },
      ],
    },
    {
      name: "featuredImage",
      type: "upload",
      relationTo: "media",
      admin: {
        description: "The main hero image for the blog post.",
        position: "sidebar",
      },
    },
    {
      name: "content",
      type: "richText",
      editor: lexicalEditor({
        features: ({ defaultFeatures }) => [
          ...defaultFeatures,
          BlocksFeature({
            blocks: allBlocks,
          }),
        ],
      }),
    },
  ],
};