import { h, type VNode } from 'vue'
import IvyButtonAction from '@/views/_components/button/IvyButtonAction.vue'
import IvyTooltip from '@/views/_components/tooltip/IvyTooltip.vue'
import type { CellRenderProps } from '@/views/_components/table/IvyCellRendererProps'

export interface CellAction<Row> {
  icon: string | ((row: Row) => string)
  tooltip: string | ((row: Row) => string)
  onClick: (row: Row, e?: Event) => void | Promise<void>
  priority?: 'tertiary' | 'danger' | 'success'
  type?: 'ghost' | 'fill'
  iconStartType?: 'outline' | 'fill'
  visible?: (row: Row) => boolean
  refKey?: string
}

export interface ActionsCellOptions<Row> {
  actions: CellAction<Row>[] | ((row: Row) => CellAction<Row>[])
  idKey?: keyof Row & string
  onButtonRef?: (id: unknown, el: HTMLElement | null) => void
}

const resolve = <Row, T>(value: T | ((row: Row) => T), row: Row): T =>
  typeof value === 'function' ? (value as (row: Row) => T)(row) : value

export function actionsCellRenderer<Row extends Record<string, unknown>>(
  options: ActionsCellOptions<Row>,
) {
  const idKey = options.idKey ?? ('id' as keyof Row & string)

  return (props: CellRenderProps): VNode | null => {
    const row = props.rowData as unknown as Row
    if (!row) return null

    const actions = typeof options.actions === 'function' ? options.actions(row) : options.actions
    const visibleActions = actions
      .map((action, index) => ({ action, index }))
      .filter(({ action }) => (action.visible ? action.visible(row) : true))
    const rowId = row[idKey] as unknown

    return h(
      'div',
      {
        class: ['ivyforms-column-actions', { hovered: rowId === props.hoveredRowId }],
      },
      visibleActions.map(({ action, index }) =>
        h(
          IvyTooltip,
          {
            key: `${String(rowId)}-${String(resolve(action.icon, row))}-${index}`,
            content: resolve(action.tooltip, row),
            placement: 'top',
          },
          () => [
            h(IvyButtonAction, {
              iconOnly: true,
              iconStart: resolve(action.icon, row),
              size: 's',
              type: action.type ?? 'ghost',
              priority: action.priority ?? 'tertiary',
              iconStartType: action.iconStartType ?? 'outline',
              ref: action.refKey
                ? (el: unknown) => {
                    if (!options.onButtonRef) return
                    const node =
                      el &&
                      typeof el === 'object' &&
                      '$el' in el &&
                      (el as { $el: unknown }).$el instanceof HTMLElement
                        ? (el as { $el: HTMLElement }).$el
                        : null
                    options.onButtonRef(rowId, node)
                  }
                : undefined,
              onClick: (e: Event) => action.onClick(row, e),
            }),
          ],
        ),
      ),
    )
  }
}