import { FactorObject, objectId, vue } from '@factor/api'
import type { InputOption } from '@factor/ui'
import type { CardTemplate } from './card'
import type { TableCardConfig, TableSiteConfig } from './tables'
import { Card } from './card'

export type ThemeSettings = {
  themeId: string
  title?: string
  version?: string
  description?: string
  screenshot: string
  regions: TableCardConfig[]
  cardTemplates: readonly CardTemplate[]
  cardOptions?: (card: Card) => vue.ComputedRef<InputOption[]>
}

export class Theme extends FactorObject<ThemeSettings> {
  themeId = this.settings.themeId
  cardTemplates = this.settings.cardTemplates as CardTemplate[] | readonly CardTemplate[]
  cardOptions = this.settings.cardOptions
  regions = vue.computed(() => {
    return (this.settings.regions || []).map(reg => new Card({ ...reg, theme: this }))
  })

  regionStructure = ['header', 'page', 'footer']

  constructor(settings: ThemeSettings) {
    super('Theme', settings)
  }

  toConfig(): Partial<TableSiteConfig> {
    return {
      themeId: this.themeId,
      regions: this.regions.value.map(p => p.toConfig()),
    }
  }
}

export type ThemeConfig = {
  themeId: string
  title: string
  description: string
  screenshot: string
  version: string
  setup: () => Theme
}
