import React, { useState, Fragment } from 'react';
import { Input, Icon } from 'antd'
import './shixun-keyword-list.scss'

function AddonAfter({ callback }) {
	return <a className='btn-search' onClick={callback}>
		<Icon type='search' />
		<span>搜索</span>
	</a>
}
export default ({ onChangeLabel, btnUrl, OnSearchInput, onNewHandler, btnStyle =
	{} }) => {
	const [data, setData] = useState({
		type: 'new',
		keyword: '',
	})

	function onChangeTag(e) {
		const id = e.target.id
		setData({ ...data, type: id })
		onChangeLabel(id, "desc")
	}
	function onSetKeyword(e) {
		setData({ ...data, keyword: e.target.value })
	}

	function callback() {
		if (keyword) {
			OnSearchInput(keyword, true)
		}
	}

	function onNewShiXun() {
		if (onNewHandler) {
			onNewHandler()
			return
		}
	}

	const { type, keyword } = data
	return (
		<Fragment>
			<div className="wrapper">
				<div className="educontent  search-keyword-container">
					<div className="btn-groups">
						<a id='new' className={type === 'new' ? 'active' : ''} onClick={onChangeTag} title='最新'>最新</a>
						<a id='hot' className={type === 'hot' ? 'active' : ''} onClick={onChangeTag} title='最热'>最热</a>
					</div>
					<div className='search-container'>
						<Input onChange={onSetKeyword} value={keyword} addonAfter={<AddonAfter callback={callback} />} defaultValue="" placeholder='请输入课程名称进行搜索' />
					</div>
				</div>
				<a className="btn-new" onClick={onNewShiXun} style={btnStyle}>
					<img src={btnUrl} width={40} alt="创建实训" />
				</a>
			</div>

		</Fragment>

	)
}
