import I18N from '../I18N'
import React, { useState, useMemo, useCallback } from 'react'
import { Input, Popover } from 'tntd'
import { filter } from 'lodash'
import Icon from '../Icon'
import CheckboxList from '../CheckboxList'
import './index.less'

const parentNode = (trigger) => trigger.parentNode

const highlightText = (text, keycode) => {
  const index = text.indexOf(keycode)
  if (index === -1) {
    return text
  }
  return (
    <>
      {text.slice(0, index)}
      <span className="highlight-text">{keycode}</span>
      {text.slice(index + keycode.length)}
    </>
  )
}

export default function Search({ disabled, selected, onChange, dataSource }) {
  const [visible, setVisible] = useState(false)
  const [searchValue, setSearchValue] = useState()

  const filterDataSource = useMemo(() => {
    return searchValue
      ? filter(dataSource, (r) => r.label.includes(searchValue)).map((it) => ({
          ...it,
          label: highlightText(it.label, searchValue),
        }))
      : []
  }, [dataSource, searchValue])

  const changeSearchValue = useCallback((e) => {
    setSearchValue(e.target.value)
  }, [])

  return (
    <div className="assign-user-search">
      <Popover
        content={
          <CheckboxList
            disabled={disabled}
            dataSource={filterDataSource}
            selected={selected}
            onChange={onChange}
            emptyText={I18N.base.index.noData}
          />
        }
        trigger="click"
        visible={visible && !!searchValue}
        onVisibleChange={setVisible}
        getPopupContainer={parentNode}
        placement="bottomLeft"
        overlayClassName="assign-user-search-popover"
      >
        <Input
          placeholder={I18N.base.index.souSuo}
          value={searchValue}
          onChange={changeSearchValue}
          prefix={<Icon type="sousuo" />}
          size="large"
        />
      </Popover>
    </div>
  )
}