import { PAGE_ON_SHOW, TOP_BTN_CHANGE } from '../JCEvent'

const {ccclass, property} = cc._decorator;
import('../JCEvent')

@ccclass
export default class MainClass extends cc.Component {
    @property({type: [cc.Node]})
    pages: cc.Node[] = []
    @property({type: cc.Node})
    content: cc.Node = null
    private currentPage = 0
    private isScrolling = false

    start () {
        cc.zevent.on(TOP_BTN_CHANGE, (pageName: string) => {
            let index = this.pages.findIndex(o => {
                let comp = o.getComponent('Page')
                return comp?.pageName === pageName
            })
            this.showPage(index)
        })
        this.node.on(cc.Node.EventType.MOUSE_WHEEL, this.mouseScroll, this)
    }

    showPage(index: number) {
        console.log(`current: ${this.currentPage}, to: ${index}`)
        if (this.isScrolling) {
            return
        }
        if (index > this.pages.length || index < 0) {
            return
        }
        let self = this
        this.isScrolling = true
        const pageSize = 1037
        let y = pageSize * index
        cc.tween(this.content)
          .to(1, {position: cc.v3(0, y, 0)}, { easing: 'sineOut'})
          .call(() => {
              self.isScrolling = false
              self.currentPage = index
              cc.zevent.emit(PAGE_ON_SHOW, index)
          })
          .start()
    }

    mouseScroll(e: cc.Event.EventMouse) {
        if (e.getScrollY() > 0) {
            this.showPage(this.currentPage + 1)
        } else {
            this.showPage(this.currentPage - 1)
        }
    }
}