import type { GlobalConfig } from 'payload'

const Menu: GlobalConfig = {
  slug: 'menu',
  label: 'Main Menu',
  fields: [
    {
      name: 'menuItems',  // Field name for the top-level menu items
      type: 'array',
      fields: [
        {
          name: 'label',  // Name for the menu item
          label: 'Label',  // Displayed label for admins
          type: 'text',
          required: true,
        },
        {
          name: 'linkType',
          type: 'radio',
          required: true,
          defaultValue: 'page',
          options: [
            { label: 'Page', value: 'page' },
            { label: 'Custom URL', value: 'custom' },
          ],
        },
        {
          name: 'page',
          type: 'relationship',
          relationTo: 'pages',
          admin: {
            condition: (_, siblingData) => siblingData.linkType === 'page',
          },
        },
        {
          name: 'url',
          type: 'text',
          admin: {
            condition: (_, siblingData) => siblingData.linkType === 'custom',
          },
        },
        {
          name: 'subItems',  // Nested menu items
          label: 'Sub Menu Items',  // Label for nested items
          type: 'array',
          fields: [
            {
              name: 'label',  // Name for the nested menu item
              label: 'Name of Sub Menu Item',  // Displayed label for admins
              type: 'text',
              required: true,
            },
            {
              name: 'icon',
              label: 'Icon',
              type: 'upload',
              relationTo: 'media',
            },
            {
              name: 'description',  // Name for the menu item
              label: 'Description',  // Displayed label for admins
              type: 'text',
            },
            {
              name: 'linkType',
              type: 'radio',
              required: true,
              defaultValue: 'page',
              options: [
                { label: 'Page', value: 'page' },
                { label: 'Custom URL', value: 'custom' },
              ],
            },
            {
              name: 'page',
              type: 'relationship',
              relationTo: 'pages',
              admin: {
                condition: (_, siblingData) => siblingData.linkType === 'page',
              },
            },
            {
              name: 'url',
              type: 'text',
              admin: {
                condition: (_, siblingData) => siblingData.linkType === 'custom',
              },
            },
          ],
        },
      ],
    },
  ],
}

export default Menu