import { CommonConstants, CompStyle, ViewType } from 'wdConstant';
import { LazyDataSource, Logger } from 'wdKit';
import { CompDTO } from '../repository/bean/CompDTO';
import PageViewModel from '../viewmodel/PageViewModel';
import { EmptyComponent } from './EmptyComponent';
import { ErrorComponent } from './ErrorComponent';
import { LabelComponent } from './LabelComponent';
import { TitleAbbrComponent } from './TitleAbbrComponent';
import { TitleAllComponent } from './TitleAllComponent';
import { BannerComponent } from './BannerComponent'
import PageModel from '../viewmodel/PageModel';
import { listTouchEvent } from '../utils/PullDownRefresh';
import RefreshLayout from './page/RefreshLayout';
import { RefreshLayoutBean } from './page/RefreshLayoutBean';
import NoMoreLayout from './page/NoMoreLayout';
import LoadMoreLayout from './page/LoadMoreLayout';
import CustomRefreshLoadLayout from './page/CustomRefreshLoadLayout';

const TAG = 'PageComponent';

@Component
export struct PageComponent {
  // @State viewType: number = ViewType.LOADING;
  // Group数据及子组件数据
  // @State compList: LazyDataSource<CompDTO> = new LazyDataSource();
  @State private pageModel: PageModel = new PageModel();
  currentTopNavSelectedIndex: number = 0;
  pageId: string = "";
  channelId: string = "";

  // @Link @Watch('onChange') paIndex:number

  build() {
    Column() {
      if (this.pageModel.viewType == ViewType.LOADING) {
        // LoadingComponent()
        this.LoadingLayout()
      } else if (this.pageModel.viewType == ViewType.ERROR) {
        ErrorComponent()
      } else if (this.pageModel.viewType == ViewType.EMPTY) {
        EmptyComponent()
      } else {
        this.ListLayout()
      }
    }
    .width(CommonConstants.FULL_PARENT)
    .height(CommonConstants.FULL_PARENT)
    .onTouch((event: TouchEvent | undefined) => {
      if (event) {
        if (this.pageModel.viewType === ViewType.LOADED) {
          listTouchEvent(this.pageModel, event);
        }
      }
    })

  }

  @Builder ListLayout() {
    List() {
      // 下拉刷新
      ListItem() {
        RefreshLayout({
          refreshBean: new RefreshLayoutBean(this.pageModel.isVisiblePullDown, this.pageModel.pullDownRefreshImage,
            this.pageModel.pullDownRefreshText, this.pageModel.pullDownRefreshHeight)
        })
      }

      LazyForEach(this.pageModel.compList, (compDTO: CompDTO, compIndex: number) => {
        ListItem() {
          Column() {
            this.componentBuilder(compDTO, compIndex)
          }
        }
      })

      // 加载更多
      ListItem() {
        if (this.pageModel.hasMore) {
          LoadMoreLayout({
            refreshBean: new RefreshLayoutBean(this.pageModel.isVisiblePullUpLoad, this.pageModel.pullUpLoadImage,
              this.pageModel.pullUpLoadText, this.pageModel.pullUpLoadHeight)
          })
        } else {
          NoMoreLayout()
        }
      }
    }
    .cachedCount(5)
    .height(CommonConstants.FULL_PARENT)
    .onScrollIndex((start: number, end: number) => {
      // Listen to the first index of the current list.
      this.pageModel.startIndex = start;
      // 包含了 头尾item，判断时需要考虑+2
      this.pageModel.endIndex = end;
    })
  }

  @Builder LoadingLayout() {
    CustomRefreshLoadLayout({ refreshBean: new RefreshLayoutBean(true,
      $r('app.media.ic_pull_up_load'), $r('app.string.pull_up_load_text'), this.pageModel.pullDownRefreshHeight) })
  }

  @Builder
  componentBuilder(compDTO: CompDTO, compIndex: number) {
    if (compDTO.compStyle === CompStyle.Label_03) {
      LabelComponent({ compDTO: compDTO })
    } else if (compDTO.compStyle === CompStyle.Title_Abbr_01) {
      TitleAbbrComponent({ compDTO: compDTO })
    } else if (compDTO.compStyle === CompStyle.Title_All_01) {
      TitleAllComponent({ compDTO: compDTO })
    } else if (compDTO.compStyle === CompStyle.Carousel_Layout_01) {
      BannerComponent({ compDTO: compDTO })
    } else {
      // todo:组件未实现 / Component Not Implemented
      Text(compDTO.compStyle)
        .width(CommonConstants.FULL_PARENT)
        .padding(10)
      // .backgroundColor(Color.Brown) // 展示本页未实现的compStyle
    }
  }

  async aboutToAppear() {
    Logger.info(TAG, `aboutToAppear id: ${this.pageId} , ${this.channelId} , navIndex: ${this.currentTopNavSelectedIndex}`);
    this.pageModel.pageId = this.pageId;
    this.pageModel.groupId = this.pageId;
    this.pageModel.channelId = this.channelId;
    this.pageModel.currentPage = 1;
    let pageDto = await PageViewModel.getPageData(this.pageModel.pageId, this.pageModel.pageId, this.pageModel.channelId
      , this.pageModel.currentPage, this.pageModel.pageSize, getContext(this))
    if (pageDto && pageDto.compList && pageDto.compList.length > 0) {
      this.pageModel.viewType = ViewType.LOADED;
      this.pageModel.compList.push(...pageDto.compList)
      if (pageDto.compList.length === this.pageModel.pageSize) {
        this.pageModel.currentPage++;
        this.pageModel.hasMore = true;
      } else {
        this.pageModel.hasMore = false;
      }
    } else {
      Logger.debug(TAG, 'aboutToAppear, data response page ' + this.pageId + ', comp list is empty.');
      this.pageModel.viewType = ViewType.EMPTY;
    }
  }
}