import router from '@ohos.router'
import { StringUtils } from 'wdKit/src/main/ets/utils/StringUtils'
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() {
            SearchHistoryComponent({ searchHistoryData: $searchHistoryData })

            //分隔符
            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)
        }
        TextInput({ text: this.searchText, placeholder: '', controller: this.controller })
          .caretColor(Color.Pink)
          .fontSize('27lpx')
          .fontColor(Color.Black)
          .onChange((value: string) => {
            this.searchText = value
            if (this.searchText.length > 0) {
              this.hasInputContent = false
            } else {
              this.hasInputContent = true
            }
          })
          .backgroundColor($r('app.color.color_transparent'))
      }
      .backgroundImage($r('app.media.search_page_input_bg'))
      .backgroundImageSize(ImageSize.Cover)
      .layoutWeight(1)
      .height('69lpx')

      //右
      Text("取消")
        .textAlign(TextAlign.Center)
        .fontWeight('400lpx')
        .fontSize('31lpx')
        .lineHeight('58lpx')
        .fontColor($r('app.color.color_222222'))
        .width('125lpx')
        .height('58lpx')
        .onClick(() => {
          router.back()
          // SearcherAboutDataModel.putSearchHistoryData(this.searchText)
          // if(StringUtils.isNotEmpty(this.searchText)){
          //   if(this.searchHistoryData.length===10){
          //     this.searchHistoryData.pop()
          //   }
          //   this.searchHistoryData.push(new SearchHistoryItem(this.searchText))
          // }
        })
    }
    .height('85lpx')
    .padding({ left: '31lpx' })
    .alignItems(VerticalAlign.Center)
    .margin({ bottom: '36lpx' })
  }
}