import {Input, View, Text, PageContainer} from "@tarojs/components";
import {FC, useEffect, useState} from "react";
import { AtIcon } from 'taro-ui'
import styles from './index.module.scss'
import Taro from "@tarojs/taro";
import { useReady, useDidShow } from '@tarojs/taro'
import SearchList from './components/list'


const Search:FC = () => {
  const globalData = Taro.getApp().globalData
  const [value, setValue] = useState('')
  const [recentSearch, setRecentSearch] = useState<string[]>([])
  const [hotSearch,setHotSearch] = useState<any[]>([])
  const [show, setShow] = useState(false)

  useReady(()=>{
    console.log('onReady')
  })
  useDidShow(()=>{
    getRecentSearch()
  })

  useEffect(()=>{
    if(!show){
      getRecentSearch()
    }
  },[show])

  function inpFn(e){
    setValue(e.detail.value)
  }

  function clearSearch(){
    Taro.removeStorageSync('recentSearch')
    getRecentSearch()
  }

  function getRecentSearch () {
    setRecentSearch(Taro.getStorageSync('recentSearch'))
  }
  function getSearchItem(value) {
    setValue(value)
    // Taro.navigateTo({
    //   url:`/pages/preview/search/list/index?name=${value}`
    // })
    setShow(true)
  }

 function searchInput(){
   if (value === "") return;
   getSearchItem(value)
   //记录最近搜索
   let recentSearch = Taro.getStorageSync('recentSearch') || [];
   recentSearch.unshift(value);
   Taro.setStorageSync('recentSearch', [...new Set(recentSearch)])
 }

 function navBack(){
    Taro.navigateBack()
 }


  return (
    <View className="flex flex-column">
        <View className={styles.navBox} style={{height:`${globalData.statusBarHeight+globalData.textBarHeight}px`}}>
          <View style={{height:`${globalData.statusBarHeight}px`}}></View>
          <View  style={{height:`${globalData.textBarHeight}px`,display:'flex',alignItems:'center'}}>
            <View className="flex justify-end" style={{width:'40px'}}>
              <AtIcon value='chevron-left' size='25' color='#333' onClick={navBack}></AtIcon>
            </View>
            <View className="font-28 font-weight flex-1" style={{display:'flex',justifyContent:'center',paddingRight:'40px',boxSizing:'border-box'}}>搜索</View>
          </View>
        </View>

        <View style={{paddingLeft: '30rpx'}}>
        <View style={{height:`${globalData.statusBarHeight+globalData.textBarHeight}px`}}></View>
        <View className={styles.searchBox}>
          <AtIcon value='search' size='20' color='#ccc'></AtIcon>
          { show ?
            <Text className={styles.input} >{value}</Text>:
            <Input className={styles.input} placeholder="输入关键字搜索" type={'text'} confirmType={'search'} onInput={inpFn} onConfirm={searchInput} />
          }
        </View>

      {
        recentSearch.length >= 1 && !show &&
        <>
          <View className={styles.titleBox} >
            <Text className={styles.title}>最近搜索</Text>
            <AtIcon onClick={clearSearch} value='trash' size='16' color='#909795'></AtIcon>
          </View>
            <View className={styles.contentBox}>
              {
                recentSearch.length &&
                recentSearch?.map(d =>
                  <View className={styles.items}>
                    <View onClick={()=>{getSearchItem(d)}} className="font-28" >{d}</View>
                  </View>)
              }
            </View>
        </>
      }
      {
        hotSearch.length >= 1 && !show &&
        <>
          <View className={`flex justify-between ${styles.titleBox}`} >

            <Text className="font-32 fwb">热门搜索</Text>
          </View>
          <View className="wid100 pt-3 pl-3 box-b">
            <View className="wid100 flex flex-wrap">
              {
                hotSearch.length &&
                hotSearch.map(d =>
                  <View className="py-1 px-2 rounded-40 mr-2 mb-2 bg-warning text-white">
                    <View onClick={()=>{getSearchItem(d)}} className="font-28" >{d}</View>
                  </View>)
              }
            </View>
          </View>
        </>
      }

      <PageContainer onBeforeLeave={() => {setShow(false)}}  onClickOverlay={()=>{ setShow(false)}} show={show} round={true} overlay={true} overlayStyle={'background:rgba(0,0,0,0)'} >
        <SearchList name={value} clear={show} />
      </PageContainer>
        </View>

    </View>
  )
}
export default Search
