import type { GlobalConfig } from 'payload';

import { createDefaultLandingPageLayoutForPayload } from '../../components/landing/content';
import { landingPageBlocks } from './landing-page-blocks';

export const LandingPage: GlobalConfig = {
  slug: 'landing-page',
  label: 'Landing Page',
  access: {
    read: () => true,
  },
  admin: {
    livePreview: {
      url: ({
        payload,
      }: {
        payload: { config: { serverURL?: string | null } };
      }) => `${payload.config.serverURL ?? ''}/?preview=true`,
      breakpoints: [
        {
          label: 'Mobile',
          name: 'mobile',
          width: 390,
          height: 844,
        },
        {
          label: 'Tablet',
          name: 'tablet',
          width: 768,
          height: 1024,
        },
        {
          label: 'Desktop',
          name: 'desktop',
          width: 1440,
          height: 1024,
        },
      ],
    },
  },
  versions: {
    drafts: {
      autosave: {
        interval: 500,
      },
    },
  },
  fields: [
    {
      name: 'layout',
      label: 'Layout Builder',
      type: 'blocks',
      minRows: 1,
      defaultValue: () => createDefaultLandingPageLayoutForPayload(),
      blocks: landingPageBlocks,
      admin: {
        description:
          'Add, remove, and reorder landing page sections while keeping live preview and autosave.',
        initCollapsed: true,
      },
    },
  ],
};
