import { Meta, StoryObj } from '@storybook/nextjs-vite'
import { SerializedEditorState } from 'lexical'
import forest from "../../assets/forest.jpeg"
import chris from "../../assets/christophorus.jpeg"
import { Button } from '@/components/Button/Button'
import { ImageWithText } from './ImageWithText'

const meta: Meta<typeof ImageWithText> = {
  component: ImageWithText,
}

type Story = StoryObj<typeof ImageWithText>;
export default meta

// Minimal Lexical editor state, mirroring the helpers in RichText.stories.tsx,
// so we can exercise the richtext branch of `text`.
const richText: SerializedEditorState = {
  root: {
    type: 'root',
    format: '',
    indent: 0,
    version: 1,
    direction: 'ltr',
    children: [
      {
        type: 'paragraph',
        format: '',
        indent: 0,
        version: 1,
        direction: 'ltr',
        textFormat: 0,
        textStyle: '',
        children: [
          { type: 'text', format: 0, mode: 'normal', style: '', text: 'Dies ist ein ', detail: 0, version: 1 },
          { type: 'text', format: 1, mode: 'normal', style: '', text: 'formatierter', detail: 0, version: 1 },
          { type: 'text', format: 0, mode: 'normal', style: '', text: ' Absatz mit ', detail: 0, version: 1 },
          { type: 'text', format: 2, mode: 'normal', style: '', text: 'kursivem', detail: 0, version: 1 },
          { type: 'text', format: 0, mode: 'normal', style: '', text: ' Text.', detail: 0, version: 1 },
        ],
      },
      {
        type: 'paragraph',
        format: '',
        indent: 0,
        version: 1,
        direction: 'ltr',
        textFormat: 0,
        textStyle: '',
        children: [
          { type: 'text', format: 0, mode: 'normal', style: '', text: 'Ein zweiter Absatz beweist, dass mehrzeiliger Richtext gerendert wird.', detail: 0, version: 1 },
        ],
      },
    ],
  },
} as unknown as SerializedEditorState

export const AboutUs: Story = {
  args: {
    image: forest,
    backgroundColor: "soft",
    schema: 'contrast',
    title: 'Über uns',
    text: 'Wir begrüßen Sie herzlich in unserer Pfarrei Hl. Drei Könige und im bunten Neukölln mit einer Vielfalt von Kulturen und Nationalitäten.\n' +
      '\n' +
      'Unsere Pfarrei Hl. Drei Könige wurde am 01.01.2020 gegründet. Am 12.01.2020 feierte Erzbischof Dr. Heiner Koch mit den Gemeinden die Gründung in einer feierlichen Hl. Messe in der katholischen Marienschule. Anwesende Gäste waren Bürgermeister Martin Hikel, Christian Nottmeier, der Superintendent des evangelischen Kirchenkreises Neukölln und vielen Akteuren aus Kiez und Ökumene. Die Vielfalt der Glaubenswege in unserer Pfarrei sehen wir als Schatz. Wie die drei Weisen aus dem Morgenland wollen wir uns immer wieder neu auf den Weg machen.',
  },
}

export const Christophorus: Story = {
  args: {
    image: chris,
    backgroundColor: undefined,
    title: 'St. Christhoporus',
    text: 'Die St. Christophorus Kirche in Berlin-Neukölln ist ein bedeutendes Beispiel für modernen Kirchenbau in der Hauptstadt. Erbaut in den 1960er Jahren, spiegelt das Gebäude die Architektur und künstlerische Gestaltung dieser Zeit wider und zeichnet sich durch schlichte, klare Linien und einen funktionalen Stil aus. Die Kirche ist nach dem heiligen Christophorus benannt, dem Schutzpatron der Reisenden, und bietet den Gemeindemitgliedern und Besuchern einen Ort der Ruhe und Besinnung im lebhaften Stadtteil Neukölln. Neben Gottesdiensten finden hier regelmäßig kulturelle Veranstaltungen und soziale Projekte statt, die die Kirche zu einem wichtigen Treffpunkt im Kiez machen.',
  },
}

// Image on the right instead of the default left.
export const ImageRight: Story = {
  args: {
    image: chris,
    backgroundColor: 'soft',
    schema: 'contrast',
    imagePosition: 'right',
    title: 'St. Christophorus',
    text: 'Mit der neuen Eigenschaft "imagePosition" lässt sich das Bild auf die rechte Seite legen, während der Text links steht.',
  },
}

// No title — the heading is omitted entirely.
export const WithoutTitle: Story = {
  args: {
    image: forest,
    backgroundColor: 'soft',
    text: 'Der Titel ist jetzt optional. Ohne "title" wird nur das Bild und der Text gerendert, ohne Überschrift.',
  },
}

// `text` as Lexical richtext instead of a plain string.
export const RichTextContent: Story = {
  args: {
    image: forest,
    title: 'Richtext-Inhalt',
    text: richText,
  },
}

// Reduced section padding via the new `padding` prop.
export const SmallPadding: Story = {
  args: {
    image: chris,
    backgroundColor: 'off-white',
    padding: 'small',
    title: 'Kompakter Abstand',
    text: 'Mit "padding" wird der vertikale Abstand der Section gesteuert (small | medium | large).',
  },
}

// Several stacked ImageWithText sections whose image alternates left / right.
export const Alternating: Story = {
  render: () => {
    const sections = [
      { image: forest, title: 'Über uns', text: 'Wir begrüßen Sie herzlich in unserer Pfarrei Hl. Drei Könige und im bunten Neukölln mit einer Vielfalt von Kulturen und Nationalitäten.' },
      { image: chris, title: 'St. Christophorus', text: 'Die St. Christophorus Kirche in Berlin-Neukölln ist ein bedeutendes Beispiel für modernen Kirchenbau in der Hauptstadt.' },
      { image: forest, title: 'Gemeindeleben', text: 'Neben Gottesdiensten finden regelmäßig kulturelle Veranstaltungen und soziale Projekte statt.' },
      { image: chris, title: 'Mitmachen', text: 'Herzlich willkommen sind alle, die mitfeiern und mitbeten möchten.' },
    ]

    return (
      <>
        {sections.map((section, index) => (
          <ImageWithText
            key={index}
            image={section.image}
            title={section.title}
            text={section.text}
            titleSize={"md"}
            ratio={"1/3"}
            padding={"medium"}
            imagePosition={index % 2 === 0 ? 'left' : 'right'}
            backgroundColor={index % 2 === 0 ? undefined : 'soft'}
          />
        ))}
      </>
    )
  },
}

// 1/3 ratio: image column takes one third, text column two thirds (default is 1/2).
export const ImageThirdRatio: Story = {
  args: {
    image: chris,
    backgroundColor: 'soft',
    schema: 'contrast',
    ratio: '1/3',
    title: 'Schmaleres Bild',
    text: 'Mit "ratio: 1/3" nimmt die Bildspalte ein Drittel der Breite ein und die Textspalte zwei Drittel. Standard ist "1/2" – beide Spalten gleich breit.',
  },
}

// Smaller title via the `titleSize` prop (default is "lg").
export const SmallTitle: Story = {
  args: {
    image: forest,
    backgroundColor: 'soft',
    titleSize: 'md',
    title: 'Kleinerer Titel',
    text: 'Mit "titleSize" lässt sich die Größe der Überschrift steuern (xl | lg | md | sm). Standard ist "lg".',
  },
}

// Optional call-to-action link rendered below the text.
export const WithLink: Story = {
  args: {
    image: forest,
    schema: 'contrast',
    backgroundColor: 'soft',
    title: 'Mit Aktion',
    text: 'Über die "link"-Eigenschaft kann ein beliebiges Element – etwa ein Button – unter dem Text angezeigt werden.',
    link: <Button size={'md'} schema={'contrast'} href={'#'}>Mehr erfahren</Button>,
  },
}