import { h, type VNode } from 'vue'
import IvyIcon from '@/views/_components/icon/IvyIcon.vue'
import type { CellRenderProps } from '@/views/_components/table/IvyCellRendererProps'

export interface StarCellOptions<Row> {
  field: keyof Row & string
  onChange: (row: Row, value: boolean) => void | Promise<void>
  ariaLabel?: string
}

export function starCellRenderer<Row extends Record<string, unknown>>(
  options: StarCellOptions<Row>,
) {
  const field = options.field
  return (props: CellRenderProps): VNode | null => {
    const row = props.rowData as unknown as Row
    if (!row) return null
    const starred = Boolean(row[field])

    return h(IvyIcon, {
      name: starred ? 'star-2' : 'star',
      type: 'fill',
      size: 'd',
      color: starred ? 'var(--map-accent-amber-symbol-0)' : 'var(--map-base-dusk-symbol--1)',
      style: 'cursor: pointer;',
      ariaLabel: options.ariaLabel,
      onClick: async () => {
        await options.onChange(row, !starred)
      },
    })
  }
}