import * as React from 'react'
import { Search } from '@beisen-cmps/italent-feedmix-components'
import { handleSearchFeed, handleSearchUser } from '../../helper/require'
import { i18nDefaultInterface } from './iFeedInterface'
import { isEn } from './../../helper'

interface Props {
	handleSearch: (feeds: any, searchText: any, isSearchFeed: boolean) => void
	tabName: string
	channelId: number | string
	i18nTranslation: i18nDefaultInterface
}
interface States {}
export default class FeedSearch extends React.Component<Props, States> {
	constructor(props: Props) {
		super(props)
	}
	// 处理动态搜索
	handleSearchFeed = (value: string) => {
		const transformedSearch = value
			.replace(/</g, '&lt;')
			.replace(/>/g, '&gt;')
			.replace(/ /g, '&nbsp;')
			.replace(/\'/g, '&#39;')
			.replace(/\"/g, '&quot;')
		const searchValue = transformedSearch.slice(0, 100)
		handleSearchFeed(searchValue, this.props.channelId, 1).then(data => {
			const { Code, Data } = data
			if (Code === 1) {
				this.props.handleSearch(Data, value, true)
			}
		})
	}
	// 搜索人
	handleSearchUser = (user: { Id: number, Name: string }) => {
		handleSearchUser(user, this.props.channelId, 1).then(data => {
			const { Code, Data } = data
			if (Code === 1) {
				this.props.handleSearch(Data, user, false)
			}
		})
	}
	render() {
		const { tabName = '我的动态', i18nTranslation } = this.props
		const placeholder = `${i18nTranslation.searchText}${
			isEn() ? '' : tabName
		}`
		return (
			<div
				style={{
					position: 'absolute',
					top: '55px',
					width: 200,
					right: -2
				}}>
				<Search
					placeholder={placeholder}
					handleSearchFeed={this.handleSearchFeed}
					handleSearchUser={this.handleSearchUser}
					translation={i18nTranslation}
				/>
			</div>
		)
	}
}