import router from '@ohos.router'
import { StringUtils, ToastUtils } from 'wdKit'
import SearcherAboutDataModel from '../../model/SearcherAboutDataModel'
import { SearchHistoryItem } from '../../viewmodel/SearchHistoryItem'
import { SearchHistoryComponent } from './SearchHistoryComponent'
import { SearchHotsComponent } from './SearchHotsComponent'

const TAG = "SearchComponent"

@Component
export struct SearchComponent {
  @State searchTextData: string[] = []
  @State hasInputContent: boolean = false
  @State hasChooseSearch: boolean = false
  private swiperController: SwiperController = new SwiperController()
  @State searchText: string = ''
  controller: TextInputController = new TextInputController()
  @State searchHistoryData: SearchHistoryItem[] = []
  scroller: Scroller = new Scroller()

  aboutToAppear() {
    //获取提示滚动
    this.getSearchHint()
    //获取搜索历史
    this.getSearchHistoryData()
  }



  getSearchHint() {
    SearcherAboutDataModel.getSearchHintData(getContext(this)).then((value) => {
      if (value != null) {
        this.searchTextData = value
      }
    }).catch((err: Error) => {
      console.log(TAG, JSON.stringify(err))
    })
  }

  getSearchHistoryData() {
    this.searchHistoryData = SearcherAboutDataModel.getSearchHistoryData()
  }

  build() {
    Column() {
      this.searchInputComponent()
      if (!this.hasInputContent) {
        Scroll(this.scroller) {
          Column() {
            if(this.searchHistoryData!=null && this.searchHistoryData.length>0){
              SearchHistoryComponent({ searchHistoryData: $searchHistoryData, onDelHistory: (): void => this.getSearchHistoryData() })
            }

            //分隔符
            Divider()
              .width('100%')
              .height('1lpx')
              .color($r('app.color.color_EDEDED'))
              .strokeWidth('1lpx')

            SearchHotsComponent()
          }
        }
        .scrollable(ScrollDirection.Vertical)
        .scrollBar(BarState.Off)
        .width('100%')
        .height('100%')
        .padding({ left: '31lpx', right: '31lpx' })
      } else {
        if (this.hasChooseSearch) {
          //搜索结果

          //搜索结果为null（空布局 + 为你推荐）
        } else {
          //联想搜索
        }
      }
    }.height('100%')
    .width('100%')
  }

  //搜索框
  @Builder searchInputComponent() {
    Row() {
      //左
      Stack({ alignContent: Alignment.Start }) {
        if (this.searchTextData != null && this.searchTextData.length > 0 && !this.hasInputContent) {
          Swiper(this.swiperController) {
            ForEach(this.searchTextData, (item: string, index: number) => {
              Text(item)
                .fontWeight('400lpx')
                .fontSize('25lpx')
                .fontColor($r('app.color.color_666666'))
                .lineHeight('35lpx')
                .textAlign(TextAlign.Start)
                .maxLines(1)
                .textOverflow({ overflow: TextOverflow.Clip })
                .margin({ left: '40lpx' })
            })
          }
          .loop(true)
          .autoPlay(true)
          .interval(3000)
          .indicator(false)
          .vertical(true)
          .enabled(false)
          .focusable(false)
        }
        Row(){
          TextInput({ text: this.searchText, placeholder: '', controller: this.controller })
          .caretColor(Color.Pink)
          .fontSize('27lpx')
            .layoutWeight(1)
          .fontColor(Color.Black)
          .onChange((value: string) => {
            this.searchText = value
            if (this.searchText.length > 0) {
              this.hasInputContent = true
            } else {
              this.hasInputContent = false
            }
          })
          .backgroundColor($r('app.color.color_transparent'))
          .defaultFocus(true)
          if(this.hasInputContent){
            Image($r('app.media.search_input_del_icon'))
              .width('31lpx')
              .height('31lpx')
              .objectFit(ImageFit.Cover)
              .interpolation(ImageInterpolation.High)
              .onClick(()=>{
                this.searchText = ""
                this.hasInputContent = false
              })
          }
        }.padding({right:'30lpx'})
        .layoutWeight(1)
      }
      .backgroundImage($r('app.media.search_page_input_bg'))
      .backgroundImageSize(ImageSize.Cover)
      .layoutWeight(1)
      .height('69lpx')

      //TODO 需要修改输入法  换行
      //右
      Text(this.hasInputContent?"搜索":"取消")
        .textAlign(TextAlign.Center)
        .fontWeight('400lpx')
        .fontSize('31lpx')
        .lineHeight('58lpx')
        .fontColor($r('app.color.color_222222'))
        .width('125lpx')
        .height('58lpx')
        .onClick(() => {
          if(this.hasInputContent){
            if(StringUtils.isNotEmpty(this.searchText)){
              SearcherAboutDataModel.putSearchHistoryData(this.searchText)
              this.getSearchHistoryData()
              ToastUtils.shortToast("插入一条搜索记录")
            }
          }else{
            router.back()
          }
        })
    }
    .height('85lpx')
    .padding({ left: '31lpx' })
    .alignItems(VerticalAlign.Center)
    .margin({ bottom: '36lpx' })
  }
}