import { defineNuxtPlugin } from '#app'

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.hook('mdc-editor:config', ({ config, editor }: { config: any, editor: any }) => {
    config.components.push({
      displayName: 'Section',
      description: 'Insert a customizable section',
      group: 'Mise en page',
      icon: 'i-mdi-view-carousel-outline rotate-90',
      previewHTML: `
        <p class="text-skeleton pt2 px2.5">x xxx xxxx xxx xxx xx x xxx</p>
        <p class="text-skeleton bg-teal-500 px2.5 py2">x xx xxx xx xxxx xx xx</p>
        <p class="text-skeleton px2.5">xx x xxx xxx x xx xxx</p>
      `,
      handleMenu: true,
      slashMenu: true,
      transformable: true,
      transform() {
        return { type: 'containerComponent', attrs: { componentName: 'prose-section' } }
      },
      onSelect: () => editor.commands.insertContainerComponent({
        name: 'prose-section',
      }),
    })

    config.components.push({
      displayName: 'Graphique',
      description: 'Insert a chart',
      group: 'Média',
      icon: 'i-lucide-line-chart',
      handleMenu: true,
      slashMenu: true,
      onSelect: () => {
        editor.commands.insertContainerComponent({
          name: 'chart',
          attributes: {
            'type': 'bar',
            ':data': JSON.stringify([15, 30, 50, 25, 10, 15, 40]),
            ':labels': JSON.stringify(['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']),
          },
        })
      },
    })

    config.components.push({
      displayName: 'Contenu d\'une page',
      description: 'Insert content of a page',
      group: 'Blocs avancés',
      icon: 'i-lucide-file-symlink',
      handleMenu: true,
      slashMenu: true,
      onSelect: () => {
        editor.commands.insertContainerComponent({
          name: 'page-content',
          attributes: {
            path: '/',
          },
        })
      },
    })

    config.components.push({
      displayName: 'Sommaire',
      description: 'Sommaire de la page',
      group: 'Blocs avancés',
      icon: 'i-lucide-list-tree',
      handleMenu: true,
      slashMenu: true,
      onSelect: () => {
        editor.commands.insertContainerComponent({
          name: 'page-toc',
        })
      },
    })

    config.components.push({
      displayName: 'Carte',
      description: 'Insert a map',
      group: 'Blocs avancés',
      icon: 'i-lucide-map-pinned',
      handleMenu: true,
      slashMenu: true,
      onSelect: () => {
        editor.commands.insertContainerComponent({
          name: 'prose-map',
        })
      },
    })

    config.components.push({
      displayName: 'Tableau de données',
      description: 'Insert a data table',
      group: 'Blocs avancés',
      icon: 'i-lucide-table-2',
      handleMenu: true,
      slashMenu: true,
      onSelect: () => {
        editor.commands.insertContainerComponent({
          name: 'data-table',
        })
      },
    })

    config.components.push({
      displayName: 'Liste de contenus',
      description: 'Display a list of content',
      group: 'Blocs avancés',
      icon: 'i-lucide-layout-list',
      handleMenu: true,
      slashMenu: true,
      onSelect: () => {
        editor.commands.insertContainerComponent({
          name: 'prose-list',
        })
      },
    })

    return config
  })
})