import { RouterUrls } from '../../../../../common/RouterUrls';
import { ImageMaterial } from '../../../../../entity/MaterialInfoEntity';
import { ConfigManager } from '../../../../../manager/UserConfigManager';
import { ToastUtils } from '../../../../../utils/ToastUtils';
import { ImageMaterialItemView } from '../../../../../view/MaterialItemView';

@ComponentV2
export struct WxImageMaterialPage {
  @Param isPlayback: boolean = false
  @Param mediaList: Array<ImageMaterial> = [];
  @Param rowCount: number = 1;
  @Param onShare?: (video: ImageMaterial) => void = undefined
  @Param onSave?: (list: Array<ImageMaterial>) => void = undefined
  @Param onItemDelete?: (video: ImageMaterial) => void = undefined
  @Local isCheckAll: boolean = false

  selectedItems(): Array<ImageMaterial> {
    const list = new Array<ImageMaterial>();
    this.mediaList.forEach((item) => {
      if (item.isChecked) {
        list.push(item);
      }
    })
    return list;
  }

  build() {
    Stack() {
      Column() {
        Grid() {
          ForEach(this.mediaList, (item: ImageMaterial, index) => {
            GridItem() {
              ImageMaterialItemView({ media: item, rowCount: this.rowCount, isWxVideo: true,
                onDelete: (image) => {
                  if (this.onItemDelete) {
                    this.onItemDelete(image)
                  }
                }
              })
            }
            .onClick(() => {
              item.isChecked = !item.isChecked;
              this.isCheckAll = this.mediaList.every(item => item.isChecked)
            })
          })
        }
        .scrollBar(BarState.Off)
        .columnsTemplate(this.rowCount === 1 ? '1fr' : this.rowCount === 2 ? '1fr 1fr' : '1fr 1fr 1fr')
        .rowsGap(10)
        .columnsGap(10)
        .margin({ left: 16, right: 16, bottom: 15 })
        .layoutWeight(1)

        Row() {
          Row() {
            Image(this.mediaList.every(item => item.isChecked) ? $r('app.media.ic_check_true') :
            $r('app.media.ic_check_false')).width(18).height(18)
            Text('全选').fontColor($r('app.color.color_212226')).fontSize(16).margin({ left: 7 })
          }
          .onClick(() => {
            this.isCheckAll = !this.isCheckAll;
            this.mediaList.forEach((item) => {
              item.isChecked = this.isCheckAll;
            })
          })

          Blank().layoutWeight(1)

          Button('转发', { type: ButtonType.Capsule, stateEffect: true })
            .width(122)
            .height(40)
            .fontSize(15)
            .fontColor($r('app.color.color_466afd'))
            .fontWeight(FontWeight.Medium)
            .borderWidth(1)
            .borderColor($r('app.color.color_466afd'))
            .backgroundColor(Color.Transparent)
            .onClick(() => {
              if (this.onShare) {
                const list = this.selectedItems();
                if (list.length === 0) {
                  ToastUtils.show('请选择要转发的图片');
                } else if (list.length > 1) {
                  ToastUtils.show('一次只能转发一张图片');
                } else {
                  this.onShare(list[0]);
                }
              }
            })

          Button('保存', { type: ButtonType.Capsule, stateEffect: true })
            .width(122)
            .height(40)
            .fontColor(Color.White)
            .fontSize(15)
            .fontWeight(FontWeight.Medium)
            .backgroundColor($r('app.color.color_466afd'))
            .margin({ left: 12 })
            .onClick(() => {
              if (this.onSave) {
                const list = this.selectedItems();
                if (list.length === 0) {
                  ToastUtils.show('请选择要保存的图片');
                } else {
                  this.onSave(list);
                }
              }
            })
        }
        .backgroundColor(Color.White)
        .padding({
          left: 16,
          top: 10,
          right: 16,
          bottom: 30
        })
        .visibility(this.mediaList.length > 0 ? Visibility.Visible : Visibility.None)
      }

      Column() {
        Stack() {
          Image($r('app.media.ic_course_thumb')).width(240).height(240)
          Image($r('app.media.ic_play_video')).width(50).height(50)
        }.width('100%').height(290).backgroundColor(Color.Black)
        .onClick(() => {
          if (this.isPlayback) {
            this.getUIContext().getRouter().pushUrl({url: RouterUrls.VIDEO_PLAYER_PAGE, params: {uri: ConfigManager.getPlaybackCourse(), title: '视频教程'}})
          } else {
            this.getUIContext().getRouter().pushUrl({url: RouterUrls.VIDEO_PLAYER_PAGE, params: {uri: ConfigManager.getWxVideoCourse(), title: '视频教程'}})
          }
        })

        Column() {
          Text('操作步骤：').fontColor($r('app.color.color_90ffffff')).fontSize(14)
          Text(this.isPlayback ? $r('app.string.wx_playback_course') : $r('app.string.wx_video_course'))
            .fontColor($r('app.color.color_50ffffff'))
            .fontSize(12)
            .lineHeight(20)
            .margin({ top: 9 })
        }.alignItems(HorizontalAlign.Start).width(245).layoutWeight(1).margin({ top: 37 })
      }
      .visibility(this.mediaList.length > 0 ? Visibility.None : Visibility.Visible)
    }
    .width('100%')
    .height('100%')
  }
}