import { RouterUrls } from '../common/RouterUrls';
import { AudioMaterial, ImageMaterial, TextMaterial, VideoMaterial } from '../entity/MaterialInfoEntity';

@ComponentV2
export struct VideoMaterialItemView {
  @Param media?: VideoMaterial = undefined;
  @Param rowCount: number = 1;
  @Param isWxVideo: boolean = false;
  @Param onDelete?: (media: VideoMaterial) => void = undefined

  build() {
    Column() {
      RelativeContainer() {
        Image(this.media?.thumb)
          .width('100%')
          .height('100%')
          .borderRadius({topLeft: 10, topRight: 10, bottomLeft: !this.media?.title ? 10: 0, bottomRight: !this.media?.title ? 10: 0})
          .backgroundColor($r('app.color.color_222222'))
          .id('iv_thumb')

        Image($r('app.media.ic_play_video')).width(50).height(50)
          .alignRules({
            left: { anchor: 'iv_thumb', align: HorizontalAlign.Start },
            top: { anchor: 'iv_thumb', align: VerticalAlign.Top },
            right: { anchor: 'iv_thumb', align: HorizontalAlign.End },
            bottom: { anchor: 'iv_thumb', align: VerticalAlign.Bottom },
          })
          .onClick(() => {
            if (this.media?.play) {
              this.getUIContext().getRouter().pushUrl({url: RouterUrls.VIDEO_PLAYER_PAGE, params: {uri: this.media.url}})
            }
          })

        Image(this.media?.isChecked ? $r('app.media.ic_check_true') : $r('app.media.ic_check_false'))
          .width(18)
          .height(18)
          .alignRules({
            top: { anchor: '__container__', align: VerticalAlign.Top },
            right: { anchor: '__container__', align: HorizontalAlign.End }
          })
          .margin({ top: 6, right: 6 })

        Stack() {
          Image($r('app.media.ic_delete_material')).height(16).width(16)
        }
        .width(30)
        .height(30)
        .borderRadius(15)
        .backgroundBlurStyle(BlurStyle.Thin, { colorMode: ThemeColorMode.LIGHT })
        .alignRules({
          top: {anchor: '__container__', align: VerticalAlign.Top},
          left: {anchor: '__container__', align: HorizontalAlign.Start}
        })
        .margin({top: 6, left: 6})
        .visibility(this.isWxVideo ? Visibility.Visible : Visibility.None)
        .onClick(() => {
          if (this.onDelete) {
            this.onDelete(this.media!!)
          }
        })
      }.width('100%').aspectRatio(this.rowCount === 1 ? 1.715 : this.rowCount === 2 ? 0.677 : 1)

      Text(this.media?.title)
        .textAlign(TextAlign.Center)
        .fontColor($r('app.color.color_1a1a1a'))
        .fontSize(12)
        .maxLines(1)
        .textOverflow({ overflow: TextOverflow.Ellipsis })
        .ellipsisMode(EllipsisMode.END)
        .padding({left: 8, top: 10, right: 8, bottom: 10})
        .visibility(this.media?.title ? Visibility.Visible : Visibility.None)
    }
    .backgroundColor(Color.White)
    .borderRadius(10)
  }
}

@ComponentV2
export struct ImageMaterialItemView {
  @Param media?: ImageMaterial = undefined;
  @Param rowCount: number = 1;
  @Param isWxVideo: boolean = false;
  @Param onDelete?: (media: ImageMaterial) => void = undefined

  build() {
    Column() {
      RelativeContainer() {
        Image(this.media?.url)
          .width('100%')
          .height('100%')
          .borderRadius(6)
          .backgroundColor($r('app.color.color_222222'))
          .id('iv_thumb')

        Image(this.media?.isChecked ? $r('app.media.ic_check_true') : $r('app.media.ic_check_false'))
          .width(18)
          .height(18)
          .alignRules({
            top: { anchor: '__container__', align: VerticalAlign.Top },
            right: { anchor: '__container__', align: HorizontalAlign.End }
          })
          .margin({ top: 6, right: 6 })

        Stack() {
          Image($r('app.media.ic_delete_material')).height(16).width(16)
        }
        .width(30)
        .height(30)
        .borderRadius(15)
        .backgroundBlurStyle(BlurStyle.Thin, { colorMode: ThemeColorMode.LIGHT })
        .alignRules({
          top: {anchor: '__container__', align: VerticalAlign.Top},
          left: {anchor: '__container__', align: HorizontalAlign.Start}
        })
        .margin({top: 6, left: 6})
        .visibility(this.isWxVideo ? Visibility.Visible : Visibility.None)
        .onClick(() => {
          if (this.onDelete) {
            this.onDelete(this.media!!)
          }
        })
      }.width('100%').aspectRatio(this.rowCount === 1 ? 1.715 : this.rowCount === 2 ? 0.677 : 1)
    }
  }
}

@ComponentV2
export struct AudioMaterialItemView {
  @Param media?: AudioMaterial = undefined;

  build() {
    Row() {
      Text(this.media?.title)
        .layoutWeight(1)
        .fontColor($r('app.color.color_212226'))
        .fontSize(15)
        .maxLines(2)
        .textOverflow({ overflow: TextOverflow.Ellipsis })

      Image(this.media?.isChecked ? $r('app.media.ic_check_true') : $r('app.media.ic_check_false'))
        .width(18).height(18).margin({ left: 10 })
    }
    .borderRadius(10)
    .backgroundColor(Color.White)
    .padding({
      left: 12,
      top: 14,
      right: 12,
      bottom: 14
    })
  }
}

@ComponentV2
export struct TextMaterialItemView {
  @Param media?: TextMaterial = undefined;

  build() {
    Row() {
      Text(this.media?.desc)
        .layoutWeight(1)
        .fontColor($r('app.color.color_212226'))
        .fontSize(14)

      Image(this.media?.isChecked ? $r('app.media.ic_check_true') : $r('app.media.ic_check_false'))
        .width(18).height(18).margin({ left: 10 })
    }
    .borderRadius(10)
    .backgroundColor(Color.White)
    .padding({
      left: 12,
      top: 14,
      right: 12,
      bottom: 14
    })
  }
}