import type { Block } from 'payload'
import {
  lexicalEditor,
  BoldFeature,
  ItalicFeature,
  UnderlineFeature,
  LinkFeature,
  UnorderedListFeature,
  OrderedListFeature,
  HeadingFeature,
  BlockquoteFeature,
} from '@payloadcms/richtext-lexical'

const fdRichTextEditor = lexicalEditor({
  features: ({ defaultFeatures }) => [
    ...defaultFeatures,
    BoldFeature(),
    ItalicFeature(),
    UnderlineFeature(),
    LinkFeature({ enabledCollections: ['pages', 'posts'] }),
    UnorderedListFeature(),
    OrderedListFeature(),
    HeadingFeature({ enabledHeadingSizes: ['h2', 'h3', 'h4'] }),
    BlockquoteFeature(),
  ],
})

export const FDTextBlock: Block = {
  slug: 'fdText',
  interfaceName: 'FDTextBlock',
  labels: {
    singular: 'FD Textblock',
    plural: 'FD Textblock',
  },
  fields: [
    {
      name: 'heading',
      type: 'text',
      localized: true,
      label: 'Rubrik',
    },
    {
      name: 'subheading',
      type: 'text',
      localized: true,
      label: 'Underrubrik',
    },
    {
      name: 'body',
      type: 'richText',
      localized: true,
      label: 'Brödtext',
      editor: fdRichTextEditor,
    },
    {
      name: 'alignment',
      type: 'select',
      label: 'Textjustering',
      defaultValue: 'left',
      options: [
        { label: 'Vänster', value: 'left' },
        { label: 'Centrerad', value: 'center' },
        { label: 'Höger', value: 'right' },
      ],
    },
    {
      name: 'textColor',
      type: 'select',
      label: 'Textfärg',
      defaultValue: 'navy',
      options: [
        { label: 'Navy', value: 'navy' },
        { label: 'Vit', value: 'white' },
        { label: 'Gul', value: 'yellow' },
      ],
    },
    {
      name: 'sectionBackground',
      type: 'select',
      label: 'Bakgrund',
      defaultValue: 'white',
      options: [
        { label: 'Vit', value: 'white' },
        { label: 'Navy', value: 'navy' },
        { label: 'Grå', value: 'gray' },
        { label: 'Gul', value: 'yellow' },
      ],
    },
    {
      name: 'maxWidth',
      type: 'select',
      label: 'Maxbredd',
      defaultValue: 'wide',
      options: [
        { label: 'Smal (600px)', value: 'narrow' },
        { label: 'Medium (800px)', value: 'medium' },
        { label: 'Bred (1100px)', value: 'wide' },
        { label: 'Full', value: 'full' },
      ],
    },
  ],
}