import { CompDTO, ContentDTO } from 'wdBean';
import { BreakPointType, Logger } from 'wdKit';
import { MasonryLayout01CardView } from './CardView';
import { EmptyComponent } from './EmptyComponent';

const TAG = 'WaterFlowComponent';

/**
 * 瀑布流组件样式:
 * 'Masonry_Layout-01', // 双列瀑布流/瀑布流卡：视频、直播、专题、活动
 */
@Component
export struct WaterFlowComponent {
  @StorageLink('currentBreakpoint') currentBreakpoint: string = 'XS';
  @State compDTO: CompDTO = {} as CompDTO
  readonly WATER_FLOW_COLUMNS_TEMPLATE_TWO: string = '1fr 1fr';
  readonly WATER_FLOW_COLUMNS_TEMPLATE_FOUR: string = '1fr 1fr 1fr 1fr';

  aboutToAppear() {
    Logger.info(TAG, `aboutToAppear, beanList:${this.compDTO?.operDataList?.length}, currentBreakpoint:${this.currentBreakpoint}`);
  }

  aboutToDisappear() {
    Logger.info(TAG, 'aboutToDisappear');
  }

  onPageShow() {
    Logger.info(TAG, 'onPageShow');
  }

  onPageHide() {
    Logger.info(TAG, 'onPageHide');
  }

  onBackPress() {
    Logger.info(TAG, 'onBackPress');
  }

  build() {
    if (this.compDTO && this.compDTO?.operDataList?.length > 0) {
      WaterFlow({ footer: (): void => this.itemFoot() }) {
        ForEach(this.compDTO?.operDataList, (item: ContentDTO, index: number) => {
          FlowItem() {
            this.buildFlowItemComponent(item, index)
          }
        })
      }
      .margin({ left: $r('app.float.main_margin'), right: $r('app.float.main_margin') })
      .padding({ bottom: 14 })
      .layoutDirection(FlexDirection.Column)
      .columnsTemplate(this.buildColumnsTemplate())
      .columnsGap(4)
      .rowsGap(14)
    } else {
      EmptyComponent({ emptyHeight: 100 })
    }
  }

  public buildColumnsTemplate(): string {
    return new BreakPointType({
      xs: this.WATER_FLOW_COLUMNS_TEMPLATE_TWO,
      sm: this.WATER_FLOW_COLUMNS_TEMPLATE_TWO,
      md: this.WATER_FLOW_COLUMNS_TEMPLATE_FOUR,
      lg: this.WATER_FLOW_COLUMNS_TEMPLATE_FOUR
    }).getValue(this.currentBreakpoint)
  }

  @Builder
  itemFoot() {
    Column() {
      // Text($r('app.string.footer_text'))
      //   .fontColor(Color.Gray)
      //   .fontSize($r('app.float.font_size_10'))
      //   .width(CommonConstants.FULL_PARENT)
      //   .height(20)
      //   .textAlign(TextAlign.Center)
    }
  }

  @Builder
  buildFlowItemComponent(item: ContentDTO, index: number) {
    MasonryLayout01CardView({
      item: item,
      index: index
    })
  }
}