import { CompDTO, ContentDTO, Params } from 'wdBean';
import { WDRouterPage, WDRouterRule } from 'wdRouter/Index';
import { HttpUrlUtils } from 'wdNetwork/Index';
import { postInteractAccentionOperateParams } from 'wdBean';
import { PageRepository } from '../../repository/PageRepository';
import { CommonConstants } from 'wdConstant/Index';
import { onlyWifiLoadImg } from '../../utils/lazyloadImg';
import { Tracking, TrackingContent, TrackConstants, ParamType } from 'wdTracking';
import { TrackingUtils } from 'wdTracking/src/main/ets/common/TrackingUtils'
/**
 * 兴趣卡
 * Zh_Single_Column-09
 */
const TAG = 'Zh_Single_Column-09'

@Entry
@Component
export struct ZhSingleColumn09 {
  @State pageId: string = '';
  @State pageName: string = '';
  @State compDTO: CompDTO = {} as CompDTO
  @State activeIndexs: Array<number> = []
  @State operDataList: ContentDTO[] = this.compDTO?.operDataList || []
  @State selfClosed: Boolean = false;
  @State loadImg: boolean = false;

  async aboutToAppear(): Promise<void> {
    this.loadImg = await onlyWifiLoadImg();
    this.operDataList = this.shuffleArray(this.compDTO?.operDataList)
  }

  trackClick(type: 'close_interest_card_click' | 'interest_card_selecting_click') {
    try {
      const contentDTO = this.compDTO.operDataList[0];
      const extParams: ParamType = {
        'action': type === 'close_interest_card_click' ? 'closeInterestCard' : 'selectInterestCard',
        'duration': 0,
        // 'action': 'detailPageShow',
        'shareChannel': '',
        'contentName': '兴趣选项卡',
        'contentType': this.compDTO.objectType || '',
        'contentId': this.compDTO.objectId,
        // 'channelSourceId': this.compDTO.channelId,
        // 'contentShowChannelId': this.compDTO.channelId,
        'regionName': 2, // 信息流：2
        'componentType': this.compDTO.compStyle,
        'sceneId': contentDTO.sceneId,
        'subSceneId': contentDTO.subSceneId,
        'cnsTraceId': contentDTO.cnsTraceId,
        'cardItemId': this.compDTO.cardItemId,
        'itemId': this.compDTO.itemId || contentDTO.itemId,
        'expIds': this.compDTO.expIds || contentDTO.expIds,
      }
      if (type === 'interest_card_selecting_click') {
        // extParams['interestOptions'] = this.operDataList.map(item => {
        //   return item.
        // })
      }
      let params = TrackingUtils.generateParams(extParams);
      params['pageId'] = this.pageId;
      params['pageName'] = this.pageName;
      TrackingUtils.fillPositionWith(params)
      Tracking.event(type, params)
    } catch (e) {
      console.log('Zh_Single_Column-09', JSON.stringify(e))
    }
  }

  getItemWidth(index: number) {
    if (index % 4 === 0 || index % 4 === 3) {
      return 80
    } else {
      return 96
    }
  }

  shuffleArray(array: ContentDTO[]) {
    for(let i = array.length - 1; i > 0; i--) {
      const j = Math.floor(Math.random() * (i + 1));
      const tempArray = array[i];
      array[i] = array[j];
      array[j] = tempArray
    }
    return array
  }

  build() {
    Column() {
      //顶部
      Row() {
        Column() {
          Text('以下是否有您感兴趣？')
            .fontSize(18)
            .fontColor(0x000000)
            .fontWeight(600)
            .width('70%')
            .margin({bottom: 4})

          Text('选中标签，为您推荐更多您感兴趣的内容')
            .fontSize(12)
            .fontColor(0xB0B0B0)
            .margin({bottom: 10})
            .width('70%')
        }

        Button('选好了', { type: ButtonType.Normal, stateEffect: false })
          .fontColor(this.activeIndexs.length > 0 ? 0xed2800 : 0xB0B0B0)
          .fontSize(14)
          .width(62)
          .height(26)
          .backgroundColor(this.activeIndexs.length > 0 ? 0xfdf0ed : 0xf5f5f5)
            // .lineHeight(26)
          .borderRadius(4)
          .margin({top: -10})
          .padding({top: 0, bottom: 0, left: 0, right: 0})
          .onClick(() => {
            this.trackClick('interest_card_selecting_click')
            if (this.activeIndexs.length > 0) {
              this.selfClosed = true;
            }
          })
      }
      .justifyContent(FlexAlign.SpaceBetween)
      .width('100%')

      Grid() {
        ForEach(this.operDataList, (item: ContentDTO, index: number) => {
          GridItem() {
            Stack({alignContent: Alignment.TopEnd}) {
              Image(this.loadImg ? item.coverUrl : '')
                .backgroundColor(0xf5f5f5)
                .width('100%')
                .height('100%')
              Text(item.newsTitle)
                .width('100%')
                .height('100%')
                .fontSize(14)
                .textAlign(TextAlign.Center)
                .fontColor(0xffffff)
              Image($r('app.media.icon_selected'))
                .width(14)
                .height(14)
                .opacity(this.activeIndexs.includes(index) ? 1 : 0)
                .objectFit(ImageFit.Contain)
            }
            .width('100%')
            .height('100%')
            .borderRadius(4)
          }
          .margin({right: index % 4 === 3 ? 0 : 6, bottom: 6})
          .onClick(() => {
            if (this.activeIndexs.includes(index)) {
              const ind = this.activeIndexs.indexOf(index);
              this.activeIndexs.splice(ind, 1)
            } else {
              this.activeIndexs.push(index)
            }
          })
        })
      }
      .height(90)
      .columnsTemplate('1fr 1fr 1fr 1fr')
      .rowsTemplate('1fr 1fr')
      .margin({bottom: 5})

      Row() {
        Row() {
          Text('换一换')
            .fontSize(14)
            .fontColor(this.compDTO?.operDataList.length > 8 ? 0xed2800 : 0xB0B0B0)
            .margin({right: 4})
          Image(this.compDTO?.operDataList.length > 8 ? $r('app.media.icon_refresh') : $r('app.media.ic_refresh'))
            .width(14)
            .height(14)
        }
        .onClick(() => {
          if (this.compDTO?.operDataList.length > 8) {
            this.operDataList = this.shuffleArray(this.operDataList)
            this.activeIndexs = [];
          }
        })

        Image($r("app.media.close_button"))
          .width(14)
          .height(14)
          .onClick(() => {
            this.trackClick('close_interest_card_click')
            this.selfClosed = true;
          })
      }
      .height(20)
      .width('100%')
      .borderRadius(3)
      .justifyContent(FlexAlign.SpaceBetween)
    }
    .padding({
      left: 10,
      right: 10,
      top: $r('app.float.card_comp_pagePadding_tb'),
      bottom: $r('app.float.card_comp_pagePadding_tb')
    })
    .backgroundColor(0xffffff)
    .width('100%')
    .visibility(this.selfClosed ? Visibility.None : Visibility.Visible)
  }
}

@Extend(Text)
function textOverflowStyle(maxLine: number) {
  .maxLines(maxLine)
  .textOverflow({ overflow: TextOverflow.Ellipsis })
}