import { common } from '@kit.AbilityKit';
import { CommonConstants } from '../common/constants/CommonConstants';
import { VideoItem } from '../viewmodel/VideoItem';
import { ArrayUtil, FileUtil, LogUtil, PreferencesUtil, StrUtil, ToastUtil } from '@pura/harmony-utils';
import MediaTable from '../common/util/MediaTable';
import { taskpool } from '@kit.ArkTS';
import { CueTrack, millisecondsToTime } from '../common/util/CueUtils';

// 批量删除
@Component
export struct CueComptent {
  @Prop title: string = ''
  @Prop isLongNameRoLL: boolean = true
  @State curIndex:number = -1
  onDoItemClick = (item: CueTrack, index: number) => {
  }
  onCancel = () => {
  }
  @Prop cueTracks: CueTrack[]
  @StorageProp('themeColor') themeColor: string = CommonConstants.DEFAULT_THEME_COLOR;
  context = this.getUIContext().getHostContext() as common.UIAbilityContext


  async aboutToAppear() {


  }

  build() {
    Column() {
      Row(){
        Text(this.title).fontSize(16)
          .margin({ left: 25 })
          .maxLines(1)
          .layoutWeight(1)
          .textOverflow({ overflow: this.isLongNameRoLL?TextOverflow.MARQUEE:TextOverflow.Ellipsis })//超长滚动

          Button({ type: ButtonType.Circle, stateEffect: true }){
            Image($r('app.media.close'))
              .fillColor($r('app.color.text_color'))
              .width(28)
              .height(28)
          }
          .clickEffect({ level: ClickEffectLevel.MIDDLE, scale: 0.8 })
          .fontSize(13)
          .width(35)
          .padding({left:5})
          .margin({ right: 18 })
          .onClick(() => {
            this.onCancel()
          })
          .backgroundColor(Color.Transparent)

      }
      .margin({ top: 20, bottom: 10 })
      .height(38)

      this.getListView()


    }
    .backgroundColor($r('app.color.start_window_background'))
    .backgroundBlurStyle(BlurStyle.Regular)
    .height('90%')
    .width('100%')
  }

  @Builder
  getListView() {
    List() {
      ForEach(this.cueTracks, (item: CueTrack, index: number) => {
        ListItem() {
          Button({ type: ButtonType.Normal, stateEffect: true }) {
            Row() {
              Row(){
                SymbolGlyph($r('sys.symbol.media_center'))
                  .fontColor([this.themeColor])
                  .fontSize(25)
                  .effectStrategy(1)
                Text(item.title || 'Unknown Title')
                  .fontSize(14)
                  .padding({ left: 6 })
                  .fontColor(this.curIndex==index?this.themeColor:$r('app.color.text_color'))
                  .maxLines(1)
                  .textOverflow({ overflow: this.isLongNameRoLL?TextOverflow.MARQUEE:TextOverflow.Ellipsis })//超长滚动

                Text(item.performer || '')
                  .fontSize(11)
                  .padding({ left: 8 })
                  .fontColor(this.curIndex==index?this.themeColor:Color.Gray)
                  .maxLines(1)
                  .textOverflow({ overflow: this.isLongNameRoLL?TextOverflow.MARQUEE:TextOverflow.Ellipsis })//超长滚动
              }
              .layoutWeight(1)
              .margin({ left: 10 })

              Blank()
              Text(millisecondsToTime(item.duration||0))
                .fontSize(14)
                .margin({ right: 10 })
                .fontColor(Color.Gray)
            }
          }
          .backgroundColor(Color.Transparent)
          .clickEffect({ level: ClickEffectLevel.MIDDLE,scale:0.8 })
          .transition(TransitionEffect.move(TransitionEdge.BOTTOM).animation({ duration: 600, curve: Curve.Ease, delay: 60*index }))
          .width('100%')
          .height(50)
          .padding({ left: 15, right: 15 })
          .onClick(() => {
            this.curIndex=index
            this.onDoItemClick(item, index)
          })
        }
      }) // 使用唯一标识符作为key
    }
    .layoutWeight(1)
    .borderRadius(20)
    .scrollBar(BarState.Off)
    .divider({
      strokeWidth: 0.2,
      color: Color.Gray,
      startMargin: 25,
      endMargin: 25
    })
  }


}