import type { GlobalConfig } from 'payload'

import { revalidateHeader } from './hooks/revalidateHeader'
import { defaultHeaderData } from '@/spa/cmsNavigation'

const linkFields = [
  { name: 'label', type: 'text' as const, required: true },
  { name: 'path', type: 'text' as const, required: true },
]

const socialFields = [
  { name: 'label', type: 'text' as const, required: true },
  { name: 'href', type: 'text' as const, required: true },
  {
    name: 'icon',
    type: 'select' as const,
    required: true,
    options: [
      { label: 'Instagram', value: 'instagram' },
      { label: 'LinkedIn', value: 'linkedin' },
      { label: 'Facebook', value: 'facebook' },
    ],
  },
]

export const Header: GlobalConfig = {
  slug: 'header',
  access: {
    read: () => true,
  },
  admin: {
    livePreview: {
      url: () => '/',
    },
    preview: () => '/',
  },
  fields: [
    {
      type: 'tabs',
      tabs: [
        {
          label: 'Brand & Overlay',
          fields: [
            { name: 'logo', type: 'upload', relationTo: 'media', admin: { description: 'Falls leer, wird /bmp-logo.png verwendet.' } },
            { name: 'overlayLogoAlt', type: 'text', defaultValue: defaultHeaderData.overlayLogoAlt, required: true },
            { name: 'overlayKicker', type: 'text', defaultValue: defaultHeaderData.overlayKicker, required: true },
            { name: 'overlayHeadline', type: 'textarea', defaultValue: defaultHeaderData.overlayHeadline, required: true },
            { name: 'mobileWatermark', type: 'textarea', defaultValue: defaultHeaderData.mobileWatermark, required: true },
            { name: 'menuLabel', type: 'text', defaultValue: defaultHeaderData.menuLabel, required: true },
            { name: 'openLabel', type: 'text', defaultValue: defaultHeaderData.openLabel, required: true },
            { name: 'closeLabel', type: 'text', defaultValue: defaultHeaderData.closeLabel, required: true },
            { name: 'overviewLabel', type: 'text', defaultValue: defaultHeaderData.overviewLabel, required: true },
            { name: 'loadingBrand', type: 'text', defaultValue: defaultHeaderData.loadingBrand, required: true },
            { name: 'loadingLabel', type: 'text', defaultValue: defaultHeaderData.loadingLabel, required: true },
          ],
        },
        {
          label: 'Navigation',
          fields: [
            {
              name: 'navItems',
              type: 'array',
              defaultValue: defaultHeaderData.navItems,
              fields: [
                { name: 'key', type: 'text', required: true, admin: { description: 'Stable internal key, e.g. presse.' } },
                ...linkFields,
                { name: 'subLabel', type: 'text' },
                {
                  name: 'sub',
                  label: 'Sub navigation',
                  type: 'array',
                  fields: linkFields,
                  admin: { initCollapsed: true },
                },
              ],
              maxRows: 8,
              admin: {
                initCollapsed: true,
                components: {
                  RowLabel: '@/Header/RowLabel#RowLabel',
                },
              },
            },
            {
              name: 'secondaryLinks',
              type: 'array',
              defaultValue: defaultHeaderData.secondaryLinks,
              fields: linkFields,
              admin: { initCollapsed: true },
            },
            {
              name: 'ctas',
              label: 'CTA links',
              type: 'array',
              defaultValue: defaultHeaderData.ctas,
              fields: [
                ...linkFields,
                {
                  name: 'variant',
                  type: 'select',
                  defaultValue: 'primary',
                  options: [
                    { label: 'Primary gold button', value: 'primary' },
                    { label: 'Secondary outline button', value: 'secondary' },
                    { label: 'Upload dashed link', value: 'upload' },
                  ],
                },
              ],
              maxRows: 3,
              admin: { initCollapsed: true },
            },
          ],
        },
        {
          label: 'Social & Language',
          fields: [
            {
              name: 'socialLinks',
              type: 'array',
              defaultValue: defaultHeaderData.socialLinks,
              fields: socialFields,
              admin: { initCollapsed: true },
            },
            {
              name: 'languages',
              type: 'array',
              defaultValue: defaultHeaderData.languages.map((label) => ({ label })),
              fields: [{ name: 'label', type: 'text', required: true }],
              maxRows: 4,
            },
          ],
        },
      ],
    },
  ],
  hooks: {
    afterChange: [revalidateHeader],
  },
}