import React, { useCallback } from 'react'
import classnames from 'classnames'

import { useLangData } from '../../ConfigProvider'
import { DownTriangleIcon, UpTriangleIcon } from '../../icons'
import { concat } from '../../utils'
import Tooltip from '../../Tooltip'
import { TableSortOrder } from '../types'

export interface Props {
  prefix: string
  order: TableSortOrder
  onSort: (order: TableSortOrder) => void
}

export default function SortIcon({ prefix: parentPrefix, order, onSort }: Props) {
  const prefix = concat(parentPrefix, 'sort')
  const sorted = order !== 'none'
  const cls = classnames(prefix, sorted && concat(prefix, order === 'desc' ? 'desc' : 'asc'))
  const handleClick = useCallback(() => onSort(getNextOrder(order)), [onSort, order])

  const langData = useLangData('table')
  const title = langData.sort[getNextOrder(order)]

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

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

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