// @unocss-include

import { vue } from '@factor/api'
import { InputOption } from '@factor/ui'
import type { CreateUserConfigs } from '../site'
import { CardTemplate } from '../card'

const standardOptions = new InputOption({
  input: 'group',
  label: 'Options',
  description: 'test',
  key: 'editor.hideCardOptions',
  options: [
    new InputOption({
      key: 'slug',
      label: 'Slug',
      input: 'InputText',
      placeholder: 'my-page',
      isRequired: true,
    }),

    new InputOption({
      key: 'userConfig.hello',
      label: 'Name',
      input: 'InputText',
      placeholder: 'Hello',
      isRequired: true,
    }),
  ],
})

export const standardCardTemplates = [
  new CardTemplate({
    templateKey: 'engine',
    el: vue.defineAsyncComponent(() => import('./ElEngine.vue')),
    isRegion: true,
  }),
  new CardTemplate({
    templateKey: 'hero',
    category: ['basic'],
    description: 'standard hero section',
    icon: 'i-tabler-layout-bottombar-collapse-filled',
    iconStyle: 'text-amber-500',
    el: vue.defineAsyncComponent(() => import('./ElHero.vue')),
    options: [
      standardOptions,
    ],
  }),
  new CardTemplate({
    templateKey: 'area',
    category: ['basic'],
    description: 'container for other elements',
    icon: 'i-tabler-box-padding',
    iconStyle: 'text-blue-500',
    el: vue.defineAsyncComponent(() => import('./ElArea.vue')),
    isContainer: true,
    options: [
      standardOptions,
    ],
  }),
  new CardTemplate({
    templateKey: 'logos',
    category: ['marketing'],
    description: 'image/logo grid',
    icon: 'i-tabler-grid',
    iconStyle: 'text-cyan-500',
    el: vue.defineAsyncComponent(() => import('./ElLogos.vue')),
    options: [
      standardOptions,
    ],
  }),
  new CardTemplate({
    templateKey: 'marquee',
    category: ['marketing'],
    description: 'animated image marquee',
    icon: 'i-tabler-carousel-horizontal',
    iconStyle: 'text-rose-500',
    el: vue.defineAsyncComponent(() => import('./ElMarquee.vue')),
    options: [
      standardOptions,
    ],
  }),
  new CardTemplate({
    templateKey: 'features',
    category: ['marketing'],
    description: 'grid of text elements',
    icon: 'i-tabler-list-details',
    iconStyle: 'text-emerald-500',
    el: vue.defineAsyncComponent(() => import('./ElFeatures.vue')),
    options: [
      standardOptions,
    ],
  }),
] as const

export type TPLStandard = CreateUserConfigs<typeof standardCardTemplates>
