import { ContentDetailDTO } from 'wdBean/Index'
import { WindowModel } from 'wdKit/Index'
import {
  publishCommentModel
} from '../../../../../wdComponent/src/main/ets/components/comment/model/PublishCommentModel'
import { CommentComponent } from '../../../../../wdComponent/src/main/ets/components/comment/view/CommentComponent'
import { OperRowListView } from '../../../../../wdComponent/src/main/ets/components/view/OperRowListView'


@Component
export struct CommentDialogView {
  @Link publishCommentModel: publishCommentModel
  @Consume @Watch('showCommentListChange') showCommentList: boolean
  @Link index: number
  @Link currentIndex: number
  @Consume windowWidth: number
  @Consume windowHeight: number
  @Consume bottomSafeHeight: number
  @Consume topSafeHeight: number
  @Consume contentDetailData: ContentDetailDTO
  @State dialogOffsetY: number = 0 // (this.windowHeight - this.windowWidth * 9 / 16)
  // @State modifier: DrawModifier = new DrawModifier();
  dialogController: CustomDialogController = new CustomDialogController({
    builder: DetailDialog({
      publishCommentModel: $publishCommentModel,
      contentDetailData: $contentDetailData,
      dialogOffsetY: $dialogOffsetY,
      showCommentList: $showCommentList,
      windowWidth: this.windowWidth,
      windowHeight: this.windowHeight
    }),
    autoCancel: false,
    customStyle: true,
    alignment: DialogAlignment.Bottom,
    // onWillDismiss: (dismissDialogAction: DismissDialogAction) => {
    //   this.showCommentList = false
    //   dismissDialogAction.dismiss()
    // },
    // openAnimation: { duration: 0 },
    // closeAnimation: { duration: 0 },
  })

  /**
   * 问题：弹窗从底部到上动画无法添加
   */

  showCommentListChange(val: boolean) {
    if (this.showCommentList && this.index === this.currentIndex) {
      this.dialogController.open()
      console.log('open')
      // animateTo({ duration: 10000, expectedFrameRateRange: { min: 60, max: 60, expected: 60 } }, () => {
      //   this.dialogOffsetY = 500
      //   this.modifier.invalidate()
      // })
    } else {
      this.dialogController.close()
      console.log('close')
    }
  }

  build() {
  }
}

@CustomDialog
export struct DetailDialog {
  controller: CustomDialogController
  @Link publishCommentModel: publishCommentModel
  @Link dialogOffsetY: number
  @Link contentDetailData: ContentDetailDTO
  @Link showCommentList: boolean
  @Prop windowWidth: number
  @Prop windowHeight: number

  build() {
    Column() {
      Scroll() {
        CommentComponent({
          publishCommentModel: this.publishCommentModel,
          showCloseIcon: true,
          onCloseClick: () => {
            console.log('onCloseClick')
            this.showCommentList = false
            this.controller.close()
            // setTimeout(() => {
            //
            // }, 1000)

          }
        }).height('100%')
      }
      .layoutWeight(1)

      OperRowListView({
        componentType: 1,
        showBackIcon: false,
        operationButtonList: ['comment', 'like', 'collect', 'share'],
        contentDetailData: this.contentDetailData,
        publishCommentModel: this.publishCommentModel,
        showCommentIcon: true,
        onBack: () => {
          WindowModel.shared.setWindowLayoutFullScreen(false)
          WindowModel.shared.setWindowSystemBarProperties({ statusBarContentColor: '#000000', })
        }
      })
    }
    .height(this.windowHeight - this.windowWidth * 9 / 16 + 'px')
    // .margin({ top: this.dialogOffsetY + 'px' })
    .zIndex(1000)
    .backgroundColor(Color.White)
  }
}