import { InputOption } from '@factor/ui'
import { vue } from '@factor/api'
import type { CreateUserConfigs } from '../../site'
import { Card } from '../../card'
import { Theme } from '../../theme'
import type { TPLStandard } from '../../standard-cards'
import { standardCardTemplates } from '../../standard-cards'

const cardTemplates = [
  ...standardCardTemplates,
] as const

export type TPL = CreateUserConfigs<typeof cardTemplates> & TPLStandard

const pages = [
  new Card({
    regionKey: 'page',
    templateKey: 'engine',
    title: 'Home',
    slug: '_home',
    cards: [{ templateKey: 'hero' }, { templateKey: 'area', cards: [{ templateKey: 'hero' }] }, { templateKey: 'hero' }],
  }),
  new Card({
    regionKey: 'page',
    templateKey: 'engine',
    title: 'Example',
    slug: 'example',
    cards: [{ templateKey: 'area', cards: [{ templateKey: 'hero' }] }],
  }),
]

export const theme = new Theme({
  themeId: 'standard',
  title: 'Standard',
  description: 'Standard and minimal',
  screenshot: new URL('./img/screenshot.jpg', import.meta.url).href,
  version: '1.0.0',
  regions: [...pages].map(p => p.toConfig()),
  cardTemplates,
  cardOptions: (card: Card) => {
    return vue.computed(() => {
      const bgMode = card.userConfig.value.bgMode
      const overlayName = bgMode === 'image'
        ? 'Overlay'
        : bgMode === 'gradient'
          ? 'Gradient'
          : 'Background'

      return [

        new InputOption({
          input: 'group',
          key: 'editor.hideBasicOptions',
          label: 'Background &amp; Color',
          options: [

            new InputOption({
              key: 'userConfig.scheme',
              label: 'Text Color Palette',
              input: 'InputColorScheme',
            }),
            new InputOption({
              key: 'userConfig.bgMode',
              label: 'Background Mode',
              input: 'InputSelect',
              props: {
                defaultValue: 'image',
                list: ['color', 'gradient', 'image'],
              },
            }),
            new InputOption({
              key: 'userConfig.bgImage',
              label: 'Background Image',
              input: 'InputMediaLibrary',
              isVisible: bgMode === 'image',
            }),
            new InputOption({
              key: 'userConfig.bgColor',
              label: `${overlayName} Color`,
              input: 'InputColor',
              isVisible: bgMode === 'color',
            }),
            new InputOption({
              key: 'userConfig.bgGradient',
              label: `Background Gradient`,
              input: 'InputGradient',
              isVisible: bgMode === 'gradient',
            }),
          ],
        }),
        new InputOption({
          input: 'group',
          key: 'editor.hideMetaOptions',
          label: 'Meta',
          options: [
            new InputOption({
              key: 'title',
              label: 'Title (Reference)',
              input: 'InputText',
              placeholder: 'My Element',
            }),
          ],
        }),
      ]
    })
  },
})
