// @unocss-include
import type { ActionItem, ClickHandler } from '@factor/api'
import { vue } from '@factor/api'
import type { Site } from '../site'

export type Handle = {
  handleId: string
  title: string
  sub?: string
  depth: number
  icon?: string
  iconStyle?: string
  isDraggable?: boolean
  hasDrawer?: boolean
  handles?: Handle[]
  onClick?: ClickHandler
  actions?: ActionItem[]
  isActive?: boolean
}

export type EditorTool<T extends string = string> = {
  toolId: T
  title?: string
  icon: string
  el?: vue.Component
  isPrimary?: boolean
  location?: 'left' | 'right'
  props?: (site: Site) => vue.ComputedRef<Record<string, unknown>>
}

// Define your tools with const assertion
export const toolList = [
  {
    toolId: 'pages',
    icon: 'i-tabler-files',
    el: vue.defineAsyncComponent(() => import('./ToolPages.vue')),
    isPrimary: true,
  },
  {
    toolId: 'layout',
    icon: 'i-tabler-layout',
    el: vue.defineAsyncComponent(() => import('./layout/ToolLayout.vue')),
    isPrimary: true,
  },
  {
    toolId: 'add',
    title: 'Add Elements',
    icon: 'i-tabler-new-section',
    el: vue.defineAsyncComponent(() => import('./ToolAdd.vue')),
    isPrimary: true,
  },
  {
    toolId: 'createPage',
    title: 'Create Page',
    icon: 'i-tabler-file-plus',
    el: vue.defineAsyncComponent(() => import('./ToolPageEdit.vue')),
  },
  {
    toolId: 'editPage',
    title: 'Edit Page',
    icon: 'i-tabler-file-edit',
    props: (site: Site) => {
      return vue.computed(() => {
        return {
          title: `Edit Page: ${site.editPageConfig.value?.title || 'Untitled'}`,
          saveText: 'Save Changes',
        }
      })
    },
    el: vue.defineAsyncComponent(() => import('./ToolPageEdit.vue')),
  },
  {
    toolId: 'editCard',
    title: 'Edit Element',
    icon: 'i-tabler-file-edit',
    location: 'right',
    props: (site: Site) => {
      return vue.computed(() => {
        const c = site.activeCard.value
        const cardTitle = c?.title.value || c?.tpl.value?.settings.title
        const title = site.editor.stateCardId ? `Edit Element: ${cardTitle}` : 'Select Element'
        return {
          title,
        }
      })
    },
    el: vue.defineAsyncComponent(() => import('./ToolCardEdit.vue')),
  },
] as const

export type ToolKeys = (typeof toolList)[number]['toolId']
export function tools() {
  return toolList as readonly EditorTool<ToolKeys>[]
}
