import { h } from 'vue'
import IvyIcon from '@/views/_components/icon/IvyIcon.vue'
import type { TableColumn } from '@/views/_components/table/IvyTableColumn'
import { starCellRenderer } from '@/views/_components/table/renderers'
import type { StarCellOptions } from '@/views/_components/table/renderers/starCellRenderer'

export interface StarColumnOptions<Row extends Record<string, unknown>> {
  onChange: StarCellOptions<Row>['onChange']
  field: StarCellOptions<Row>['field']
  ariaLabel?: StarCellOptions<Row>['ariaLabel']
  title?: string
  width?: number
  minWidth?: number
  headerColor?: string
  overrides?: Partial<TableColumn>
}

export function starColumn<Row extends Record<string, unknown>>(
  options: StarColumnOptions<Row>,
): TableColumn {
  const width = options.width ?? 32
  return {
    key: 'star',
    width,
    minWidth: options.minWidth ?? width,
    title: options.title,
    headerRenderer: () =>
      h(IvyIcon, {
        name: 'star',
        type: 'outline',
        size: 'd',
        color: options.headerColor ?? 'var(--map-base-dusk-symbol-2)',
      }),
    cellRenderer: starCellRenderer<Row>({
      onChange: options.onChange,
      field: options.field,
      ariaLabel: options.ariaLabel,
    }),
    visible: true,
    showInModal: true,
    ...options.overrides,
  }
}