import { getDownloadUrl, downloadUrl } from '../api/originalRecords'
import { AxiosResponse } from '@ohos/axios'
import { downFile } from '../utils/downFile'
import { router } from '@kit.ArkUI'
import PhotoBrowser from '../dialog/PhotoBrowserDialog'
import NavHeader from '../components/NavHeader'
interface showVideoOrImg {
  cosKey: string | null;
  itemName: string;
  videoList?: string[];
  imgList?: string[];
}
interface VideoOrImgList {
  videoList: string[];
  imgList: string[];
}
interface routerParams {
  cosKeyList: showVideoOrImg[]
}
let routerQuery = router.getParams() as routerParams
@Entry
@Component
struct DownLoadImage {
  @State cosKeyData: showVideoOrImg[] = routerQuery?.cosKeyList
  @State showCosKeyList: showVideoOrImg[] = []
  @State viewImg: string[] = []
  @State viewVideo: string[] = []
  @State saveButtonOptions: SaveButtonOptions = {
    icon: SaveIconStyle.FULL_FILLED,
    text: SaveDescription.SAVE,
    buttonType: ButtonType.Capsule
  }
  photoBrowserController: CustomDialogController = new CustomDialogController({
    builder: PhotoBrowser({ imagesList: this.viewImg}),
    customStyle: true,
    offset: { dx: 0, dy: 0 },
    alignment: DialogAlignment.Top,
  })
  async aboutToAppear() {
    this.showCosKeyList = await Promise.all(this.cosKeyData.map(async (item: showVideoOrImg) => {
      if (item.cosKey) {
        const arrList: VideoOrImgList | [] = await this.getVideoOrImgUrl(item.cosKey)
        if (!Array.isArray(arrList)) {
          item.videoList = arrList.videoList
          item.imgList = arrList.imgList
        }
      }
      return item
    }))
  }
  // 请求获取图片或视频链接
  getVideoOrImgUrl = async (cosKey: string | null) => {
    let result: VideoOrImgList | [] = this.filterVideoOrImg(cosKey)
    if (!Array.isArray(result)) {
      let videoData: string[] = await Promise.all(result.videoList.map(async (item: string) => {
        const res: AxiosResponse<downloadUrl> = await getDownloadUrl(item, 0)
        return res.data.data
      }))
      let imgData: string[] = await Promise.all(result.imgList.map(async (item: string) => {
        const res: AxiosResponse<downloadUrl> = await getDownloadUrl(item, 0)
        return res.data.data
      }))
      result = {
        videoList: videoData,
        imgList: imgData
      }
    }
    return result
  }

  // 筛选图片或者视频
  filterVideoOrImg = (cosKey: string | null): VideoOrImgList | [] => {
    let urlList: string[] | undefined = cosKey?.split(';')
    let videoList: string[] = []
    let imgList: string[] = []
    if(urlList === undefined) return []
    urlList.forEach((item: string) => {
      let newItemList: string[] = item.split('.')
      if(newItemList[newItemList.length - 1] == 'mp4' || newItemList[newItemList.length - 1] == 'mkv'){
        videoList.push(item)
      } else {
        imgList.push(item)
      }
    })

    return {
      videoList,
      imgList
    }
  }


  build() {
    Column(){
      NavHeader({title: '视频/图片下载'})
      List(){
        ForEach(this.showCosKeyList, (item:showVideoOrImg ) => {
          ListItem(){
            Column({ space: 10 }) {
              Row({space: 5}){
                Text().width(2).height(20).backgroundColor('#1890ff')
                Text(item.itemName).fontSize(14).fontWeight(600)
              }.width('100%')
              GridRow({ columns: 2, gutter: 10 }) {
                ForEach(item.imgList, (childrenImg: string) => {
                  GridCol() {
                    Column({space: 10}){
                      Image(childrenImg)
                        .width('100%')
                        .height(150)
                        .borderRadius(4)
                      Row(){
                        SaveButton(this.saveButtonOptions)
                          // 创建安全控件按钮
                          .onClick(async (event, result: SaveButtonOnClickResult) => {
                            if (result == SaveButtonOnClickResult.SUCCESS) {
                              downFile(childrenImg, 'jpg')
                            }
                          })
                      }
                    }
                  }
                })
              }
              GridRow({ columns: 1}) {
                ForEach(item.videoList, (childrenVideo: string) => {
                  GridCol() {
                    Column({ space: 10}){
                      Video({ src: childrenVideo }).width('100%').height(300)
                      SaveButton(this.saveButtonOptions)
                        // 创建安全控件按钮
                        .onClick(async (event, result: SaveButtonOnClickResult) => {
                          if (result == SaveButtonOnClickResult.SUCCESS) {
                            downFile(childrenVideo, 'mp4')
                          }
                        })
                    }
                  }.margin({ top: 10 })
                })
              }
            }
          }
        })
      }.padding(10)
    }
  }
}