import { h, type Ref, type VNode } from 'vue'
import IvyCheckbox from '@/views/_components/checkbox/IvyCheckbox.vue'
import type { CellRenderProps } from '@/views/_components/table/IvyCellRendererProps'

export interface SelectHeaderOptions {
  allSelected: Ref<boolean>
  toggleAll: (value: boolean) => void
  ariaLabel?: string
}

export function selectHeaderRenderer(options: SelectHeaderOptions) {
  return (): VNode =>
    h(
      IvyCheckbox,
      {
        modelValue: options.allSelected.value,
        size: 's',
        type: 'checkmark',
        ariaLabel: options.ariaLabel,
        'onUpdate:modelValue': (value: boolean) => options.toggleAll(value),
      },
      () => [],
    )
}

export interface SelectCellOptions {
  ariaLabel?: string
}

export function selectCellRenderer<Row extends { selected?: boolean }>(
  options: SelectCellOptions = {},
) {
  return (props: CellRenderProps): VNode | null => {
    const row = props.rowData as unknown as Row
    if (!row) return null

    return h(
      IvyCheckbox,
      {
        modelValue: Boolean(row.selected),
        type: 'checkmark',
        size: 's',
        ariaLabel: options.ariaLabel,
        'onUpdate:modelValue': (value: boolean) => {
          row.selected = value
        },
      },
      () => [],
    )
  }
}