import { ProjectPlugin } from '@teleporthq/teleport-types'
import { createNextWidgetProjectPlugin } from './project-plugin-factory'
import { generateQrCodeComponentCode } from './qrcode-component'
import { generateBarcodeComponentCode } from './barcode-component'
import { generateSignatureComponentCode } from './signature-component'
import { generateColorPickerComponentCode } from './color-picker-component'
import { generateEmojiPickerComponentCode } from './emoji-picker-component'
import { generateMotionComponentCode } from './motion-component'
import { generateScrollSceneComponentCode } from './scroll-scene-component'
import { generateScrollVideoComponentCode } from './scroll-video-component'
import { generateFormFileInputComponentCode } from './form-file-input-component'
import { generateCategoriesMegamenuComponentCode } from './categories-megamenu-component'
import { generateCategoriesFilterComponentCode } from './categories-filter-component'

const PICKR_CSS_IMPORT = "import '@simonwep/pickr/dist/themes/nano.min.css'"

/**
 * The Next project plugins for the widget primitives. Each emits its local
 * wrapper (+ npm dependency, when the wrapper needs one) only when the
 * generated project uses it.
 */
export const createNextWidgetProjectPlugins = (): ProjectPlugin[] => [
  createNextWidgetProjectPlugin({
    elementType: 'qrcode-node',
    fileName: 'tq-qrcode',
    fileKey: 'tq-qrcode-component',
    generateCode: generateQrCodeComponentCode,
    dependencyName: 'qrcode',
    dependencyVersion: '1.5.4',
  }),
  createNextWidgetProjectPlugin({
    elementType: 'barcode-node',
    fileName: 'tq-barcode',
    fileKey: 'tq-barcode-component',
    generateCode: generateBarcodeComponentCode,
    dependencyName: 'jsbarcode',
    dependencyVersion: '3.12.1',
  }),
  createNextWidgetProjectPlugin({
    elementType: 'signature-node',
    fileName: 'tq-signature',
    fileKey: 'tq-signature-component',
    generateCode: generateSignatureComponentCode,
    dependencyName: 'signature_pad',
    dependencyVersion: '5.0.4',
  }),
  createNextWidgetProjectPlugin({
    elementType: 'color-picker-node',
    fileName: 'tq-color-picker',
    fileKey: 'tq-color-picker-component',
    generateCode: generateColorPickerComponentCode,
    dependencyName: '@simonwep/pickr',
    dependencyVersion: '1.9.1',
    cssImport: PICKR_CSS_IMPORT,
  }),
  createNextWidgetProjectPlugin({
    elementType: 'emoji-picker-node',
    fileName: 'tq-emoji-picker',
    fileKey: 'tq-emoji-picker-component',
    generateCode: generateEmojiPickerComponentCode,
    dependencyName: 'emoji-picker-element',
    dependencyVersion: '1.26.3',
  }),
  createNextWidgetProjectPlugin({
    elementType: 'motion-node',
    fileName: 'tq-motion',
    fileKey: 'tq-motion-component',
    generateCode: generateMotionComponentCode,
    dependencyName: 'framer-motion',
    dependencyVersion: '^11.18.0',
    // framer-motion needs React 18 — bump it like the calendar widget does.
    bumpReact18: true,
  }),
  createNextWidgetProjectPlugin({
    elementType: 'scroll-scene-node',
    fileName: 'tq-scroll-scene',
    fileKey: 'tq-scroll-scene-component',
    generateCode: generateScrollSceneComponentCode,
    dependencyName: 'framer-motion',
    dependencyVersion: '^11.18.0',
    bumpReact18: true,
  }),
  createNextWidgetProjectPlugin({
    // Pure-DOM scrub player — no animation library, no dependency to register.
    elementType: 'scroll-video-node',
    fileName: 'tq-scroll-video',
    fileKey: 'tq-scroll-video-component',
    generateCode: generateScrollVideoComponentCode,
  }),
  createNextWidgetProjectPlugin({
    elementType: 'form-file-input-node',
    fileName: 'tq-form-file-input',
    fileKey: 'tq-form-file-input-component',
    generateCode: generateFormFileInputComponentCode,
    // Pure DOM/FileReader wrapper — no npm dependency.
  }),
  createNextWidgetProjectPlugin({
    elementType: 'categories-megamenu-node',
    fileName: 'tq-categories-megamenu',
    fileKey: 'tq-categories-megamenu-component',
    generateCode: generateCategoriesMegamenuComponentCode,
    // Pure, data-driven wrapper — no npm dependency.
  }),
  createNextWidgetProjectPlugin({
    elementType: 'categories-filter-node',
    fileName: 'tq-categories-filter',
    fileKey: 'tq-categories-filter-component',
    generateCode: generateCategoriesFilterComponentCode,
    // Pure, data-driven wrapper (next/router only) — no npm dependency.
  }),
]