import type { GlobalConfig } from 'payload'
import { revalidateHeader } from './hooks/revalidateHeader'

export const Header: GlobalConfig = {
  slug: 'header',
  access: {
    read: () => true,
  },
  fields: [
    {
      name: 'navItems',
      type: 'array',
      maxRows: 8,
      admin: {
        initCollapsed: true,
        components: {
          RowLabel: '@/Header/RowLabel#RowLabel',
        },
      },
      fields: [
        {
          name: 'label',
          type: 'text',
          required: true,
          label: 'Label',
        },
        {
          name: 'url',
          type: 'text',
          label: 'URL (leave empty if this item has a submenu)',
        },
        {
          name: 'megaMenu',
          type: 'checkbox',
          label: 'Mega menu (full-width panel)',
          defaultValue: false,
          admin: {
            description:
              'When checked, hovering/clicking this item opens a full-width mega menu instead of a small dropdown card.',
          },
        },
        {
          name: 'children',
          type: 'array',
          label: 'Submenu links',
          maxRows: 16,
          admin: {
            description:
              'Add submenu links. If these exist, the parent URL is ignored. Use "Group" to create columns in the mega menu.',
            initCollapsed: true,
          },
          fields: [
            {
              name: 'label',
              type: 'text',
              required: true,
              label: 'Label',
            },
            {
              name: 'url',
              type: 'text',
              required: true,
              label: 'URL',
            },
            {
              name: 'group',
              type: 'text',
              label: 'Group (optional)',
              admin: {
                description:
                  'Links with the same group name appear together in a separate column in the mega menu. Leave empty for the main column.',
              },
            },
          ],
        },
      ],
    },
  ],
  hooks: {
    afterChange: [revalidateHeader],
  },
}