import type { Field } from 'payload'

import {
  FixedToolbarFeature,
  HeadingFeature,
  InlineToolbarFeature,
  lexicalEditor,
} from '@payloadcms/richtext-lexical'

import { linkGroup } from '@/fields/linkGroup'

export const hero: Field = {
  name: 'hero',
  type: 'group',
  fields: [
    {
      name: 'type',
      type: 'select',
      defaultValue: 'lowImpact',
      label: 'Type',
      options: [
        { label: 'None', value: 'none' },
        { label: 'High Impact', value: 'highImpact' },
        { label: 'Medium Impact', value: 'mediumImpact' },
        { label: 'Low Impact', value: 'lowImpact' },
        { label: 'Split (Portfolio)', value: 'splitHero' },
      ],
      required: true,
    },
    {
      name: 'theme',
      type: 'select',
      defaultValue: 'default',
      label: 'Background',
      admin: {
        condition: (_, { type } = {}) => type === 'lowImpact',
      },
      options: [
        { label: 'Default (Transparent)', value: 'default' },
        { label: 'Muted', value: 'muted' },
        { label: 'Card', value: 'card' },
        { label: 'Secondary', value: 'secondary' },
        { label: 'Image', value: 'image' },
      ],
    },
    {
      name: 'heroBackground',
      type: 'upload',
      relationTo: 'media',
      admin: {
        condition: (_, { type, theme } = {}) => type === 'lowImpact' && theme === 'image',
        description: 'Background image for the hero section',
      },
    },
    {
      name: 'heroBackgroundOpacity',
      type: 'number',
      defaultValue: 60,
      min: 0,
      max: 100,
      admin: {
        condition: (_, { type, theme } = {}) => type === 'lowImpact' && theme === 'image',
        description: 'Overlay opacity 0 (transparent) to 100 (solid)',
        step: 5,
      },
    },
    {
      name: 'richText',
      type: 'richText',
      editor: lexicalEditor({
        features: ({ rootFeatures }) => {
          return [
            ...rootFeatures,
            HeadingFeature({ enabledHeadingSizes: ['h1', 'h2', 'h3', 'h4'] }),
            FixedToolbarFeature(),
            InlineToolbarFeature(),
          ]
        },
      }),
      label: false,
    },
    linkGroup({
      overrides: {
        maxRows: 2,
      },
    }),
    {
      name: 'media',
      type: 'upload',
      admin: {
        condition: (_, { type } = {}) => ['highImpact', 'mediumImpact'].includes(type),
      },
      relationTo: 'media',
      required: true,
    },
    {
      name: 'eyebrow',
      type: 'text',
      label: 'Eyebrow text',
      admin: {
        condition: (_, { type } = {}) => type === 'splitHero',
        description: 'Small text above the heading e.g. "Creative technologist · Singapore"',
      },
    },
    {
      name: 'heading',
      type: 'text',
      label: 'Heading',
      admin: {
        condition: (_, { type } = {}) => type === 'splitHero',
      },
    },
    {
      name: 'subtext',
      type: 'textarea',
      label: 'Subtext',
      admin: {
        condition: (_, { type } = {}) => type === 'splitHero',
      },
    },
    {
      name: 'tags',
      type: 'array',
      label: 'Tags',
      admin: {
        condition: (_, { type } = {}) => type === 'splitHero',
      },
      fields: [{ name: 'tag', type: 'text', label: 'Tag', required: true }],
    },
    {
      name: 'primaryCta',
      type: 'group',
      label: 'Primary CTA',
      admin: {
        condition: (_, { type } = {}) => type === 'splitHero',
      },
      fields: [
        { name: 'label', type: 'text', label: 'Label', defaultValue: 'View my work' },
        { name: 'url', type: 'text', label: 'URL', defaultValue: '#work' },
      ],
    },
    {
      name: 'secondaryCta',
      type: 'group',
      label: 'Secondary CTA',
      admin: {
        condition: (_, { type } = {}) => type === 'splitHero',
      },
      fields: [
        { name: 'label', type: 'text', label: 'Label', defaultValue: 'Get in touch' },
        { name: 'url', type: 'text', label: 'URL', defaultValue: '#contact' },
      ],
    },
    {
      name: 'splitImage',
      type: 'upload',
      relationTo: 'media',
      label: 'Photo (right side)',
      admin: {
        condition: (_, { type } = {}) => type === 'splitHero',
      },
    },
  ],
  label: false,
}
