import React from 'react';
import { StoryObj, Meta } from '@storybook/react';
import AUDynamicContentComponent from '../src/components/AUDynamicContentComponent';
import { ThemeWrapper } from './lib/helpers';

export default {
  title: 'Delphinus/Dynamic Content',
  component: AUDynamicContentComponent,
  decorators: [
    (Story, context) => (
      <ThemeWrapper theme={context.globals.theme}>
        {Story()}
      </ThemeWrapper>
    )
  ],
} as Meta<typeof AUDynamicContentComponent>;

type Story = StoryObj<typeof AUDynamicContentComponent>;

const imageLinks = [
  {
    title: 'WISEflow',
    description: 'Digital aflevering af eksamensbesvarelser',
    url: 'javascript:void(0);',
    linkType: 'system' as const,
  },
  {
    title: 'Eksamensformalia på din uddannelse',
    description: 'Bliv klogere på hvilke krav der er til dine eksamener.',
    url: 'javascript:void(0);',
    linkType: 'information' as const,
  },
  {
    title: 'Tag hånd om din nervøsitet før eksamen',
    description: 'Lær hvordan du kan vende din nervøsitet til en fordel i eksamenssituationen.',
    url: 'javascript:void(0);',
    linkType: 'information' as const,
  },
];

const videoLinks = [
  {
    title: 'WISEflow',
    description: 'Digital aflevering af eksamensbesvarelser',
    url: 'javascript:void(0);',
    linkType: 'information' as const,
  },
  {
    title: 'Eksamensformalia på din uddannelse',
    description: 'Bliv klogere på hvilke krav der er til dine eksamener.',
    url: 'javascript:void(0);',
    linkType: 'system' as const,
  },
  {
    title: 'Tag hånd om din nervøsitet før eksamen',
    description: 'Lær hvordan du kan vende din nervøsitet til en fordel i eksamenssituationen.',
    url: 'javascript:void(0);',
    linkType: 'information' as const,
  },
];

const infoboxLinks = [
  {
    title: 'WISEflow',
    description: 'Digital aflevering af eksamensbesvarelser',
    url: 'javascript:void(0);',
    linkType: 'system' as const,
  },
  {
    title: 'Eksamensformalia på din uddannelse',
    description: 'Bliv klogere på hvilke krav der er til dine eksamener.',
    url: 'javascript:void(0);',
    linkType: 'system' as const,
  },
  {
    title: 'Tag hånd om din nervøsitet før eksamen',
    description: 'Lær hvordan du kan vende din nervøsitet til en fordel i eksamenssituationen.',
    url: 'javascript:void(0);',
    linkType: 'information' as const,
  },
]

export const InfoboxContent: Story = {
  args: {
    name: 'Kom godt igennem eksamensperioden',
    featuredContentDescription: '<p>Til en mundtlig eksamen skal du præstere intenst i kort tid, og det kræver en særlig forberedelse. Derudover er eksamen en mulighed for at lære en masse om dit stof og forbedre dine formidlingsevner.</p>',
    links: infoboxLinks,
    featuredContent: {
      type: 'infoBox',
      htmlContent: '<h4>Frister for tilmelding</h4><ul><li>1.-5. maj: Tilmelding til kurser i efterårssemesteret</li><li>10. juni: Sidste frist for tilmelding til sommerens eksamener</li></ul>',
    },
  },
};

export const ImageContent: Story = {
  args: {
    name: 'Kom godt igennem eksamensperioden',
    featuredContentDescription: '<p>Til en mundtlig eksamen skal du præstere intenst i kort tid, og det kræver en særlig forberedelse. Derudover er eksamen en mulighed for at lære en masse om dit stof og forbedre dine formidlingsevner.</p>',
    links: imageLinks,
    featuredContent: {
      type: 'image',
      url: 'https://picsum.photos/640/360',
      altText: 'Placeholder billede',
      caption: 'Foto: John Doe',
    },
  },
};

export const VideoContent: Story = {
  args: {
    name: 'Kom godt igennem eksamensperioden',
    featuredContentDescription: '<p>Til en mundtlig eksamen skal du præstere intenst i kort tid, og det kræver en særlig forberedelse. Derudover er eksamen en mulighed for at lære en masse om dit stof og forbedre dine formidlingsevner.</p>',
    links: videoLinks,
    featuredContent: {
      type: 'video',
      url: 'https://www.youtube-nocookie.com/embed/LI8Oo5xQMDE',
    },
  },
};