import Taro from '@tarojs/taro'
import { View, Input, Text } from '@tarojs/components'

import classNames from 'classnames'
import PropTypes, { InferProps } from 'prop-types'
import CtsComponent from '../../common/component'
import { CommonEvent } from '@tarojs/components/types/common'
import { CtsSearchProps, CtsSearchState } from 'types/search'

/**
 * 搜索输入框组件
 */
export default class CtsSearch extends CtsComponent<CtsSearchProps, CtsSearchState> {
	// static options = {
	// 	addGlobalClass: true
	// }

	public static defaultProps: CtsSearchProps
  public static propTypes: InferProps<CtsSearchProps>

  public constructor(props: CtsSearchProps) {
    super(props)
		this.state = {
			inputVal: ''
		}
  }

	public componentWillReceiveProps(props: CtsSearchProps): void {
		this.setState({ inputVal: props.value })
	}

	// 键盘输入时触发
	private onInput(e: CommonEvent): void { 
		this.props.onChange(e.detail.value.trim())
	}

	// 点击清除按钮时触发
	private onClear(): void { 
		this.setState({
			inputVal: ''
		})
		this.props.onChange('')
	}

	public render(): JSX.Element {
		const { inputVal } = this.state
		const {
			className,
			value, type, password, placeholder,
			placeholderStyle, placeholderClass, disabled, maxLength,
			focus,
			onFocus, onBlur, onConfirm,
			isCancel, onCancel
		} = this.props

		return (
			<View className={classNames('cts-search', className)}>
				<View className='cts-search-input'>
					<Text className='iconfont iconsousuo'></Text>
					<Input
						value={inputVal}
						type={type}
						password={password}
						placeholder={placeholder}
						placeholderStyle={placeholderStyle}
						placeholderClass={placeholderClass}
						disabled={disabled}
						maxLength={maxLength}
						focus={focus}
						onInput={this.onInput.bind(this)}
						onFocus={onFocus}
						onBlur={onBlur}
						onConfirm={onConfirm}
					/>
					{
						value &&
						<Text className='iconfont iconshanchu' onClick={this.onClear.bind(this)}></Text>
					}
				</View>

				{
					isCancel &&
					<Text className='search-cancel' onClick={onCancel}>取消</Text>
				}
			</View>
		)
	}
}

CtsSearch.defaultProps = {
	value: '',
	type: 'text',
	password: false,
	placeholder: '',
	placeholderStyle: '',
	placeholderClass: '',
	disabled: false,
	maxLength: 140,
	focus: false,
	onFocus() { },
	onChange() { },
	onBlur() { },
	onConfirm() { },
	isCancel: false,
	onCancel() { }
}

CtsSearch.propTypes = {
	value: PropTypes.string,
	type: PropTypes.oneOf(['text', 'number', 'idcard', 'digit']),
	password: PropTypes.bool,
	placeholder: PropTypes.string,
	placeholderStyle: PropTypes.string,
	placeholderClass: PropTypes.string,
	disabled: PropTypes.bool,
	maxLength: PropTypes.number,
	focus: PropTypes.bool,
	onFocus: PropTypes.func,
	onChange: PropTypes.func,
	onBlur: PropTypes.func,
	onConfirm: PropTypes.func,
	isCancel: PropTypes.bool,
	onCancel: PropTypes.func,
}