import { View, Input, Image, Text, Button } from '@tarojs/components'
import './index.less'
import React, { useCallback, useState, useEffect } from 'react'

/**
 * 热门 tabs
 */

type props = {
    onBack: (value: string) => void,     // 切换回调函数
    val?: string,                        // 搜索框内容
    onClear?: () => void,                // 清除触发
}

const BookSearch = (props: props) => {
    let { onBack, val = "", onClear } = props

    let [value, setValue] = useState<string>("")

    let searchHandle = useCallback(() => {
        onBack(value)
    }, [value])

    let clearHandle = useCallback(() => {
        onClear && onClear()
        setValue("")
    }, [value])

    useEffect(() => {
        setValue(val)
    }, [val])

    return <View className="bookSearch">
        <View className="left">
            <Image src={require('../../../icon/search_1.png')} className="search"/>
            <Input type='text' placeholder='书名、作者' value={value} onInput={(e)=>{setValue(e.detail.value)}} onConfirm={searchHandle}/>
            {
                value && <Image src={require('../../../icon/clear.png')} className="clear" onClick={clearHandle}/>
            }
        </View>
        <View className="right" onClick={searchHandle}>
            <Button>搜索</Button>
        </View>
    </View>
}

export default React.memo(BookSearch)