/**
 * @file 排序相关逻辑
 */

import cns from 'classnames'
import React, { useContext } from 'react'

import Tooltip from '../Tooltip'
import { DownTriangleIcon, UpTriangleIcon } from '../icons'
import { useLangData } from '../ConfigProvider'

import { concat } from '../utils'
import { DataTableSortOrder } from './defs'
import { dataTableCtx } from './context'

export function Sorter({ order, onOrderChange }: {
  order: DataTableSortOrder
  onOrderChange: (order: DataTableSortOrder) => void
}) {
  const { baseCls } = useContext(dataTableCtx)
  const sorted = order !== 'none'
  const cls = concat(baseCls, 'head', 'sort')
  const className = cns(cls, sorted && concat(cls, order === 'desc' ? 'desc' : 'asc'))
  const langData = useLangData('dataTable')
  const title = langData.sort[getNextOrder(order)]
  const handleClick = () => onOrderChange(getNextOrder(order))

  return (
    <Tooltip title={title}>
      <span className={className} onClick={handleClick}>
        <UpTriangleIcon />
        <DownTriangleIcon style={{ marginTop: '-3px' }} />
      </span>
    </Tooltip>
  )
}

const orders: DataTableSortOrder[] = ['asc', 'desc', 'none']

function getNextOrder(order: DataTableSortOrder) {
  const index = orders.indexOf(order)
  const nextIndex = (index + 1) % orders.length
  return orders[nextIndex]
}