import { RouterPage } from 'basic';
import { _YtHeader } from '../components/YtComp/_YtHeader';
import { reagencyViewModel } from '../viewModel/PageVm/reagencyViewModel';
import { reagencyComp } from '../components/reagencyComp';

@ComponentV2
@RouterPage
struct reagencyPage {
  @Local vm: reagencyViewModel = new reagencyViewModel();

  build() {
    NavDestination() {
      Column() {
        _YtHeader({
          title: '反应力训练',
          rightComp: () => { this.rightComp() }
        })

        Column(){
          Row(){
            ForEach(['命中目标', '平均反应时间', '训练时长'], (item: string, index) => {
              Column({space: 6}){
                Text(){
                  if(index == 0) {
                    Span(`${this.vm.hitCount}个`)
                  } else if (index == 1) {
                    Span(`${this.vm.avgTime}${this.vm.avgTime < 1000 ? 'ms' : 's'}`)
                  } else {
                    Span(`${this.vm.trainTime}s`)
                  }
                }
                .fontSize(25)
                .fontWeight(500)
                .fontColor('#FFFF7B00')

                Text(item)
                  .fontSize(12)
                  .fontWeight(400)
                  .fontColor('#FF333333')
              }
            })
          }
          .width("100%")
          .padding({left: 21, right: 21})
          .justifyContent(FlexAlign.SpaceBetween)

          Column(){
            reagencyComp({
              trainStarted: this.vm.trainStarted,
              bubbleClick: (time: number) => { this.vm.bubbleClick(time) },
            })
          }
          .padding({top: 23})
          .width("100%")
          .layoutWeight(1)

          Row(){
            Text()

            Row(){
              Text(this.vm.trainStarted ? '暂停训练' : '开始训练')
            }
            .borderRadius(8)
            .padding({top: 16, left: 44, right: 44, bottom: 16})
            .linearGradient({colors: [['#FFFFCC00', 0], ['#FFFF9F02', 0.7]], angle: 90})
            .onClick(() => { this.vm.toggleTrain() })

            Image($r('app.media.icon_reset'))
              .width(33)
              .aspectRatio(1)
              .onClick(() => { this.vm.resetTrain() })
          }
          .width("100%")
          .justifyContent(FlexAlign.SpaceBetween)
          .padding({top: 18, bottom: 46, left: 37, right: 37})
        }
        .width("100%")
        .layoutWeight(1)
        .padding({top: 20})
        .padding({left: 16, right: 16, top: 25})
        .borderRadius({topLeft: 23, topRight: 23})
        .backgroundColor('rgba(255, 255, 255, 0.3)')
      }
      .width('100%')
      .height('100%')
      .justifyContent(FlexAlign.Start)
      .alignItems(HorizontalAlign.Start)
    }
    .hideTitleBar(true)
    .padding({ top: this.vm.safeTop, bottom: this.vm.safeBottom })
    .linearGradient({ colors: [['#FF7FF9C3', 0], ['#FFEEECED', 0.3]]})
  }

  @Builder
  rightComp(){
    Image($r('app.media.icon_setting'))
      .width(24)
      .aspectRatio(1)
      .onClick(() => { this.vm.openSetting() })
  }
}


@Builder
function reagencyBuilder() {
  reagencyPage()
}