import React, { ReactNode } from 'react'

// copy from https://github.com/ant-design/ant-design/blob/3ea2817549eae93cda557d107fdaae7862672df5/components/cascader/index.tsx#L43
export function highlightKeyword(str: string, lowerKeyword: string, prefixCls: string | undefined): ReactNode[] {
  const cells = str
    .toLowerCase()
    .split(lowerKeyword)
    .reduce<string[]>((list, cur, index) => (index === 0 ? [cur] : [...list, lowerKeyword, cur]), [])
  const fillCells: React.ReactNode[] = []
  let start = 0

  cells.forEach((cell, index) => {
    const end = start + cell.length
    let originWorld: React.ReactNode = str.slice(start, end)
    start = end

    if (index % 2 === 1) {
      originWorld = (
        <span className={`${prefixCls}-menu-item-keyword`} style={{ fontWeight: 500 }} key={`seperator-${index}`}>
          {originWorld}
        </span>
      )
    }

    fillCells.push(originWorld)
  })

  return fillCells
}