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

const TAG = "SearchComponent"

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

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

  getRelatedSearchContent() {
    if(StringUtils.isNotEmpty(this.searchText)){
      SearcherAboutDataModel.getRelatedSearchContentData(encodeURI(this.searchText),getContext(this)).then((value) => {
        if (value != null) {
          this.relatedSearchContentsData = []
          value.forEach(item=>{
            let tempValue:string = item
            let tempArr: string[] = []
            if (tempValue.indexOf(this.searchText) === -1) {
              tempArr.push(item)
              this.relatedSearchContentsData.push(new SearchRelatedItem(item,tempArr))
            }else {
              while (tempValue.indexOf(this.searchText) != -1){
                let index = tempValue.indexOf(this.searchText)
                if(index === 0){
                  tempArr.push(this.searchText)
                  tempValue = tempValue.substring(this.searchText.length,tempValue.length)
                }else {
                  tempArr.push(tempValue.substring(0,index))
                  tempArr.push(this.searchText)
                  tempValue = tempValue.substring(index+this.searchText.length,tempValue.length)
                }
              }
              if(StringUtils.isNotEmpty(tempValue)){
                tempArr.push(tempValue)
              }
              this.relatedSearchContentsData.push(new SearchRelatedItem(item,tempArr))
            }
          })
        }
      }).catch((err: Error) => {
        console.log(TAG, JSON.stringify(err))
      })
    }
  }

  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(),onGetSearchRes: (item,index): void => this.getSearchHistoryResData(item,index) })
            }

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

            SearchHotsComponent({onGetSearchRes: (item): void => this.getSearchHotResData(item)})
          }
        }
        .scrollable(ScrollDirection.Vertical)
        .scrollBar(BarState.Off)
        .width('100%')
        .height('100%')
        .padding({ left: '31lpx', right: '31lpx' })
        .margin({ top: '36lpx' })
      } else {
        if (this.hasChooseSearch) {
          //搜索结果
          SearchResultComponent({count:this.count,searchText:this.searchText,isInit:true})
        } else {
          //联想搜索
          SearchRelatedComponent({relatedSearchContentData:$relatedSearchContentsData,onGetSearchRes: (item): void => this.getSearchRelatedResData(item),searchText:this.searchText})
        }
      }
    }.height('100%')
    .width('100%')
  }


  /**
   * 点击搜索记录列表回调
   * @param content
   */
  getSearchHistoryResData(content:string,index:number){
    //删除单条记录
    SearcherAboutDataModel.delSearchSingleHistoryData(index)
    this.isClickedHistory = true
    this.searchResData(content)
  }

  searchResData(content:string){
    //赋值
    this.searchText = content
    //保存搜索记录
    SearcherAboutDataModel.putSearchHistoryData(this.searchText)
    //获取搜索记录
    this.getSearchHistoryData()
    //清空 联想记录
    this.relatedSearchContentsData = []

    //查询 操作 TODO
    this.hasChooseSearch = true
    this.getSearchResultCountData()
  }

  /**
   * 点击联想搜索列表回调
   * @param content
   */
  getSearchRelatedResData(content:string){
    this.isClickedRelated = true
    this.searchResData(content)
  }

  /**
   * 点击热词搜索列表回调
   * @param content
   */
  getSearchHotResData(content:string){
    this.isClickedHot = true
    this.searchResData(content)
  }


  //搜索框
  @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
            }
            if(this.isClickedHistory || this.isClickedHot || this.isClickedRelated){
              this.isClickedHistory = false
              this.isClickedHot = false
              this.isClickedRelated = false
            }else{
              this.getRelatedSearchContent()
            }
          })
          .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
                this.hasChooseSearch = 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()

              this.getSearchHotResData(this.searchText)
            }
          }else{
            router.back()
          }
        })
    }
    .height('85lpx')
    .padding({ left: '31lpx' })
    .alignItems(VerticalAlign.Center)
  }


  getSearchResultCountData() {
    SearcherAboutDataModel.getSearchResultCountData(encodeURI(this.searchText),getContext(this)).then((value) => {
      if (value != null) {
        this.count = []
        if(value.allTotal!=0){
          this.count.push("全部")
        }
        if(value.cmsTotal!=0){
          this.count.push("精选")
        }
        if(value.rmhTotal!=0){
          this.count.push("人民号")
        }
        if(value.videoTotal!=0){
          this.count.push("视频")
        }
        if(value.activityTotal!=0){
          this.count.push("活动")
        }
      }
    }).catch((err: Error) => {
      console.log(TAG, JSON.stringify(err))
    })
  }
}