import { AppUtil, KeyboardUtil, StrUtil } from '@pura/harmony-utils';
import { EventConstants } from '../../../common/EventConstants';
import { MaterialCateEntity } from '../../../entity/MaterialCateEntity';
import { MaterialViewModel } from '../../../viewModel/MaterialViewModel';
import { MaterialListPage } from './MaterialListPage';

@ComponentV2
export struct MaterialPage {
  @Local currentIndex: number = 0;
  @Local cateList: Array<MaterialCateEntity> = []
  @Local inputText: string = '';

  private viewModel: MaterialViewModel = new MaterialViewModel(this.getUIContext())
  private tabController: TabsController = new TabsController();

  @Monitor('viewModel.cateList')
  onCateListChange(monitor: IMonitor) {
    const list = monitor.value()?.now as Array<MaterialCateEntity>
    this.cateList = [new MaterialCateEntity('', '推荐', '')].concat(list)
  }

  aboutToAppear(): void {
    this.viewModel.getMaterialCaleList()
  }

  build() {
    Column() {
      Row() {
        Row() {
          Image($r('app.media.ic_search')).width(18).height(18)
          TextInput({ placeholder: '请输入关键词搜索素材', text: this.inputText })
            .layoutWeight(1)
            .fontColor($r('app.color.color_1a1a1a'))
            .fontSize(14)
            .placeholderColor($r('app.color.color_999999'))
            .placeholderFont({ size: 14 })
            .backgroundColor(Color.Transparent)
            .onChange((value: string) => {
              this.inputText = value;
            })
          Image($r('app.media.ic_clear_text'))
            .width(18)
            .height(18)
            .padding(2)
            .margin({right: 5})
            .visibility(StrUtil.isNotEmpty(this.inputText) ? Visibility.Visible : Visibility.None)
            .onClick(() => {
              this.inputText = '';
            })
          Button('搜索', {type: ButtonType.Capsule ,stateEffect:true})
            .fontSize(14)
            .width(64)
            .height(32)
            .margin({right: 4})
            .backgroundColor($r('app.color.color_466afd'))
            .onClick(() => {
              AppUtil.getContext().eventHub.emit(EventConstants.MaterialListRefreshEvent, this.inputText);
              KeyboardUtil.hide()
            })
        }
        .layoutWeight(1)
        .height(40)
        .borderRadius(20)
        .backgroundColor(Color.White)
        .margin({ left: 12, right: 12 })
        .padding({left: 10})
      }.height(100).padding({ top: 50 })

      Tabs({ controller: this.tabController, barPosition: BarPosition.Start }) {
        ForEach(this.cateList, (item: MaterialCateEntity, index) => {
          TabContent() {
            MaterialListPage({cateId: item.id, initKeywords: this.inputText})
          }
          .tabBar(this.tabBuilder(item.name, index))
        })
      }
      .barMode(BarMode.Scrollable)
      .onSelected((index: number) => {
        this.currentIndex = index;
      })
    }
    .width('100%')
    .height('100%')
    .backgroundColor($r('app.color.window_background'))
  }

  @Builder
  tabBuilder(title: string, targetIndex: number) {
    Stack() {
      if (this.currentIndex === targetIndex) {
        Image($r('app.media.ic_tab_indicator')).width(27).height(11).margin({top: 13})
      }
      Text(title)
        .fontColor(this.currentIndex === targetIndex ? $r("app.color.color_212226") : $r('app.color.color_5c5f6c'))
        .fontSize(this.currentIndex === targetIndex ? 16 : 14)
        .fontWeight(this.currentIndex === targetIndex ? FontWeight.Medium : FontWeight.Regular)
    }
    .width('auto')
    .height(50)
    .margin({ left: targetIndex === 0 ? 12 : 20 })
  }
}