import { AMPSNativeAdView, ampsAd, AMPSNativeAd, AMPSNativeAdWrapper } from 'biz.beizi.adn';
import { AMPSNativeAdListener, AMPSNativeInteractiveListener, AMPSNativeExpressListener, AMPSNativeRenderListener } from 'biz.beizi.adn';

import { promptAction, router } from '@kit.ArkUI';
import { apiKey } from '../entryability/EntryAbility';
import { ParamModel } from './SplashPage';


@Entry
@Component
struct NativeAdPage {
  arr: string[] =
    ["element-1", "element-2", "element-3", "element-4", "element-5",
      "element-6", "element-7", "element-8", "element-9", "element-10"]
  @State adItems: Item[] = []
  @State listHeight: number = 120
  @State heightMap: Map<string, number> = new Map()

  private mRenderCallback:AMPSNativeRenderListener ={
    renderSuccess:(adWrapper: AMPSNativeAdWrapper)=>{
      adWrapper.interactCallBack = this.mInterCallback
      adWrapper.expressCallBack = this.expressCallBack
      this.heightMap.set(adWrapper.adId, 202)
      setTimeout(()=>{
        let ad = new AdItem(adWrapper)
        this.adItems.splice(2,0,ad)
      },10)
    },
    renderFailed: (adWrapper: AMPSNativeAdWrapper)=>{
      console.log("onAdShown:" + adWrapper.adId)
    }
  }
  private expressCallBack: AMPSNativeExpressListener = {
    onAdShown: (adId?: string): void => {
      console.log("onAdShown:" + adId)
    },
    onAdExposure: (adId?: string): void => {
      console.log("onAdExposure" + adId)
    }
  }
  private mInterCallback: AMPSNativeInteractiveListener = {
    onAdClicked: (adId?: string): void => {
      console.log("客户端onAdClicked:" + adId)
    },
    toCloseAd: (adId?: string): void => {
      let index = -1;
      for (let i = 0; i < this.adItems.length; i++) {
        if (!(this.adItems[i] instanceof AdItem)) {
          continue;
        }
        let ad = this.adItems[i] as AdItem;
        if (ad.wrapper.adId == adId) {
          index = i;
        }

      }
      if (index >= 0) {
        this.adItems.splice(index, 1);
      }
    },
    onOpenLandingPage: (adId?: string | undefined): void => {
      console.log("onOpenLandingPage:" + adId)
    },
    onCloseLandingPage: (adId?: string): void => {
      console.log("onCloseLandingPage:" + adId)
    }
  }
  private callback: AMPSNativeAdListener = {
    loadOk: (adItems: AMPSNativeAdWrapper[]): void => {
      for (let adItemsElement of adItems) {
        adItemsElement.renderCallBack = this.mRenderCallback
        //adItemsElement.option.mExpressSize = [300,400]
        adItemsElement.renderAd()
      }
    },
    loadFail: (code: number, message: string): void => {
      promptAction.showToast({ message })
    }
  }

  aboutToAppear(): void {
    for (let i = 0; i < this.arr.length; i++) {
      let o = new Item()
      o.index = i
      o.message = this.arr[i]
      this.adItems.push(o)
    }
    let option: ampsAd.AdOptions = {
      apiKey: apiKey,
      spaceId: '15295'，
      adCount: 1,
      expressSize:[px2vp(display.getDefaultDisplaySync().width),200]
    }
    let map:ParamModel= router.getParams() as ParamModel
    option.spaceId = map.spaceId
    //SDK外部调用加载广告
    new AMPSNativeAd(option, this.callback)
      .load()
  }

  build() {
    Column() {
      List() {
        ForEach(this.adItems, (item: Item, index) => {
          ListItem() {
            Column() {
              if (item instanceof AdItem) {
                Column() {
                  AMPSBuildNativeView({ nativeWrapper: item.wrapper })
                }
              } else {
                Text(`第${item.index + 1}条=${item.message}`)
                  .height("120")
                  .width("100%")
                  .backgroundColor(Color.Blue)
                  .margin(10)
                  .textAlign(TextAlign.Center)
              }
            }.width("100%")
          }
        })
      }
    }
    .width('100%')
    .height("100%")

  }
}

class Item {
  index: number = 0
  message: string = ''
}

class AdItem extends Item {
  wrapper: AMPSNativeAdWrapper
  suggestHeight = 200

  constructor(aWrapper: AMPSNativeAdWrapper) {
    super()
    this.wrapper = aWrapper
  }
}