import { SearchRelatedItem } from '../../viewmodel/SearchRelatedItem'
import { SearchShowRed, titleInitRes, textItem } from '../../utils/searchShowRed';

const TAG = "SearchRelatedComponent"

/**
 * 相关搜索
 */
@Component
export struct SearchRelatedComponent {
  @Link relatedSearchContentData: SearchRelatedItem[]
  onGetSearchRes?: (item:string) => void;
  @Prop searchText: string
  @Prop percent:number = 1

  // 正则过滤检索词
 createCaseInsensitiveRegex(str: string, pattern: string) {
   let regex =  new RegExp(pattern, 'gi');
   return str.replace(regex, (match) => `<em>${match}</em>`);
 }

 checkForPattern(str: string, pattern: string) {
   let highlightedStr = this.createCaseInsensitiveRegex(str, pattern);
   return highlightedStr;
 }

  titleInit(str: string, pattern: string) {
    const title = this.checkForPattern(str, pattern)
    const titleInitRes:titleInitRes = SearchShowRed.titleInit(title)
    return titleInitRes
  }

  build() {
    Column() {
      List() {
        ForEach(this.relatedSearchContentData, (item: SearchRelatedItem, index: number) => {
          ListItem() {
            Column(){
              Row() {
                Image($r('app.media.search_related_item_icon'))
                  .width(`${this.calcHeight(31)}lpx`)
                  .height(`${this.calcHeight(31)}lpx`)
                  .objectFit(ImageFit.Auto)
                  .margin({ right:`${this.calcHeight(10)}lpx` })
                  .interpolation(ImageInterpolation.High)

                Text(){
                  ForEach(item.data_arr,(item:string)=>{
                    if (this.titleInit(item, this.searchText).titleMarked) {
                      ForEach(this.titleInit(item, this.searchText).textArr, (textItem: textItem) => {
                        if (textItem.isRed) {
                          Span(textItem.content)
                            .fontColor($r('app.color.color_ED2800'))
                            .fontSize(`${this.calcHeight(31)}lpx`)
                            .fontWeight(400)
                            .lineHeight(`${this.calcHeight(50)}lpx`)
                        } else {
                          Span(textItem.content)
                            .fontColor($r('app.color.color_000000'))
                            .fontSize(`${this.calcHeight(31)}lpx`)
                            .fontWeight(400)
                            .lineHeight(`${this.calcHeight(50)}lpx`)
                        }
                      })
                    } else {
                      Span(item)
                        .fontColor($r('app.color.color_000000'))
                        .fontSize(`${this.calcHeight(31)}lpx`)
                        .fontWeight(400)
                        .lineHeight(`${this.calcHeight(50)}lpx`)
                    }
                  })
                }
                  .maxLines(1)
                  .textOverflow({ overflow: TextOverflow.Ellipsis })
                  .layoutWeight(1)

              }.alignItems(VerticalAlign.Center)
              .justifyContent(FlexAlign.Start)
              .height(`${this.calcHeight(95)}lpx`)

              if (index != this.relatedSearchContentData.length - 1) {
                Divider()
                  .width('100%')
                  .height(`${this.calcHeight(1)}lpx`)
                  .color($r('app.color.color_F5F5F5'))
                  .strokeWidth(`${this.calcHeight(1)}lpx`)
              }
            }
          }.width('100%')
          .onClick(()=>{
            if (this.onGetSearchRes !== undefined) {
              this.onGetSearchRes(item.data_string)
            }
          })
        })
      }.width('100%')
    }.width('100%')
    .margin({ top: `${this.calcHeight(8)}lpx` })
    .padding({ left: `${this.calcHeight(31)}lpx`, right: `${this.calcHeight(31)}lpx` })
  }

  calcHeight(value:number): number{
    return value * this.percent
  }
}