import { Body } from './components/Body'
import { Header } from './components/Header'
import { Pagination } from './components/Pagination'
import { Column } from './components/Types'

export { Column }

@Component
export struct Table {
  @Prop loading: boolean = false
  @Prop @Watch("setup") column: Array<Column> = []
  @Provide("column") private selfColumn: Array<Column> = []
  @Prop @Watch("setup") data: Array<object> = []
  @Provide("data") private selfData: Array<object> = []
  @Prop @Watch("setup") total: number = 1
  @Provide("total") selfTotal: number = 1
  @Provide("currentPage") @Watch("setupCurrentPage") private selfCurrentPage: number = 1
  @Provide("pageSize") @Watch("setupPageSize") private selfPageSize: number = 10
  @Provide("pageSizes") @Watch("setupPageSizes") private selfPageSizes: number[] = [10, 20, 30, 50]
  @Link @Watch("setup") currentPage: number
  public pageSize: number = 10
  public pageSizes: number[] = [10, 20, 30, 50]
  public onPageChange?: (currentPage: number) => void
  public onPageSizeChange?: (pageSize: number) => void
  public onPageSizesChange?: (pageSizes: number[]) => void

  aboutToAppear(): void {
    this.selfCurrentPage = this.currentPage
    this.selfPageSize = this.pageSize
    this.selfPageSizes = this.pageSizes
    this.selfTotal = this.total
    this.setup()
  }

  setup() {
    this.selfColumn = this.column
    this.selfData = this.data
    this.selfTotal = this.total
    this.selfCurrentPage = this.currentPage
  }

  setupCurrentPage() {
    this.onPageChange?.(this.selfCurrentPage)
  }

  setupPageSize() {
    this.onPageSizeChange?.(this.selfPageSize)
  }

  setupPageSizes() {
    this.onPageSizesChange?.(this.selfPageSizes)
  }

  build() {
    Column() {
      Column() {
        Header()
        if (this.loading) {
          Row() {
            LoadingProgress().width(60).color(0x4D86ED)
          }
          .width("100%")
          .backgroundColor(0x22000000)
          .alignItems(VerticalAlign.Center)
          .justifyContent(FlexAlign.Center)
          .transition(TransitionEffect.OPACITY.animation({ duration: 200, curve: Curve.EaseInOut }))
          .layoutWeight(1)
        } else {
          Body()
        }
        Pagination({ loading: this.loading })
      }.width("100%").height("100%")
    }.width("100%").constraintSize({ maxHeight: "100%" })

  }
}