import { CompDTO, ContentDTO } from 'wdBean';
import { onlyWifiLoadImg } from '../../utils/lazyloadImg';
import { ParamType, Tracking } from 'wdTracking';
import { TrackingUtils } from 'wdTracking/src/main/ets/common/TrackingUtils';
import { ToastUtils } from 'wdKit';
import PageModel from '../../viewmodel/PageModel';

/**
 * 兴趣卡
 * Zh_Single_Column-09
 */
const TAG = 'Zh_Single_Column-09'

@Entry
@Component
export struct ZhSingleColumn09 {
  @State fullyTraversed: boolean = false;
  @State private pageModel: PageModel = new PageModel();
  @State pageId: string = '';
  @State pageName: string = '';
  @State compDTO: CompDTO = {} as CompDTO
  @State activeIndexs: Array<number> = []
  @State operDataList: ContentDTO[] = this.compDTO?.operDataList || []
  @StorageLink('selfClosed') selfClosed: boolean = false
  @State loadImg: boolean = false;
  @State compIndex: number = 0;
  @State currentOperDataListIndex: number = 0; //记录换一换点击次数
  @State visitedIndices: Set<number> = new Set<number>();

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

  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));
      console.info(`cj2024 shuffleArray i = ${i} array.length = ${array.length}`)

      // 记录被选中的索引 j
      this.visitedIndices.add(j);
      console.info(`cj2024 shuffleArray j = ${j} visitedIndices = ${this.visitedIndices.size}`)
      const tempArray = array[i];
      array[i] = array[j];
      array[j] = tempArray
    }

    // 检查是否所有元素都被遍历过
    this.fullyTraversed = this.visitedIndices.size === array.length;

    return array
  }

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

          Text('选中标签，为您推荐更多您感兴趣的内容')
            .fontSize(12)
            .fontColor(0xB0B0B0)
            .padding({ 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) {
              ToastUtils.shortToast('已为您调整推荐内容')
              this.pageModel.compList.deleteItem(this.compIndex)
              this.selfClosed = true;
            }
          })
      }
      .justifyContent(FlexAlign.SpaceBetween)
      .width('100%')

      Flex({wrap: FlexWrap.Wrap}) {
        ForEach(this.operDataList.slice(0, 8), (item: ContentDTO, index: number) => {
          Row() {
            Stack({ alignContent: Alignment.TopEnd }) {
              Image(this.loadImg ? item.coverUrl : '')
                .backgroundColor(0xf5f5f5)
                .width('100%')
                .height('100%')
                .borderRadius(3)
              Row() {
              }
              .width('100%')
              .height('100%')
              .backgroundColor('rgba(0, 0, 0, 1)')
              .opacity(this.activeIndexs.includes(index) ? 0.8 : 0.4)
              .borderRadius(3)

              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%')
            .aspectRatio(2 / 1)
          }
          .width('calc((100% - 6vp * 3) / 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)
            }
          })
        })
      }
      // .columnsTemplate('1fr 1fr 1fr 1fr')
      .margin({ bottom: 5 })

      Row() {
        Row() {
          Text('换一换')
            .fontSize(14)
            .fontColor(this.compDTO?.operDataList.length > 8 && !this.fullyTraversed ? 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.fullyTraversed) {
            return
          }
          if (this.compDTO?.operDataList.length > 8) {
            this.operDataList = this.shuffleArray(this.operDataList)
            // if (this.pageModel) {
            //   this.pageModel.compList.deleteItem(this.compIndex)
            // }
            this.activeIndexs = [];
          }
        })

        Row() {
          Image($r("app.media.close_button_new"))
            .width(9)
            .height(9)
            .onClick(() => {
              this.trackClick('close_interest_card_click')
              this.pageModel.compList.deleteItem(this.compIndex)
              this.selfClosed = true;
            })
        }
        .height(14)
        .width(18)
        .border({
          width: 0.5,
          color: '#EDEDED',
          radius: 4
        })
        .alignItems(VerticalAlign.Center)
        .justifyContent(FlexAlign.Center)
      }
      .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 })
}