import type { tableColumnInGroup } from '../components/ColumnSet/index.vue'
import type { CSSProperties } from 'vue'

type RowClassGetter = (param: {
  columns: tableColumnInGroup[]
  rowData: any
  rowIndex: number
}) => string

export type CellSlotProps = {
  column: tableColumnInGroup
  columns: tableColumnInGroup[]
  columnIndex: number
  depth: number
  style: CSSProperties
  rowData: any
  rowIndex: number
  isScrolling: boolean
  expandIconProps?:
    | {
        rowData: any
        rowIndex: number
        onExpand: (expand: boolean) => void
      }
    | undefined
}

type CellClassGetter = (param: CellSlotProps) => string

const defaultCellClass = 'el-table-v2__cell-text'

export default function useTableStyle() {
  const rowClass: RowClassGetter = ({ columns, rowData, rowIndex }) => {
    const classes: string[] = []
    if (rowIndex <= 2) {
      classes.push('bg-gray')
    }
    if (rowIndex === 2) {
      classes.push('underline-red')
    }
    return classes.join(' ')
  }

  const cellClass: CellClassGetter = ({
    column,
    columns,
    columnIndex,
    rowData,
    rowIndex,
  }) => {
    const classes: string[] = [defaultCellClass]
    if (rowData[column.dataKey] === '4行-2组-6列') {
      classes.push('cell-warning')
    }
    if (rowData[column.dataKey] === '5行-3组-3列') {
      classes.push('cell-error')
    }
    return classes.join(' ')
  }

  return {
    rowClass,
    cellClass,
  }
}