import { AppKernel } from '@scripts/app/AppKernel';
import { addBtnClick } from '@scripts/utils/UIHelper';
import { _decorator, Button, Component, EditBox, Label, Node } from 'cc';
const { ccclass, property } = _decorator;

@ccclass('OTPButton')
export class OTPButton extends Component {
    @property(Label)
    label: Label;

    @property(Button)
    button: Button;

    @property(EditBox)
    account: EditBox;

    private _sending = false;
    private _cdTimer;

    protected onLoad(): void {
        addBtnClick(this.node, this.onSendCode, this);
    }

    protected onEnable(): void {
        this.startTimer();
    }

    protected onDisable(): void {

    }

    private async onSendCode() {
        const account = this.account.string;
        if (!account) return;

        if (this._sending) return;
        this._sending = true;

        const mainStore = AppKernel.stores.mainStore;
        if (await mainStore.reqSendCode(account)) {
            this.startTimer();
        }
        this._sending = false;
    }

    private stopTimer() {
        if (this._cdTimer) {
            this.unschedule(this._cdTimer);
            this._cdTimer = null;
        }
    }

    private startTimer() {
        this.stopTimer();
        const cd = AppKernel.stores.mainStore.otpCD;
        this.button.interactable = cd <= 0;
        if (cd <= 0) {
            this.label.string = "Send Code";
            return;
        }

        this._cdTimer = this.onUpdateCD.bind(this);
        this.schedule(this._cdTimer, 1, cd)
        this.onUpdateCD();
    }

    private onUpdateCD() {
        const cd = AppKernel.stores.mainStore.otpCD;
        this.label.string = `${cd} s`;
        console.log('otp cd: ', cd);
        if (cd <= 0) {
            this.stopTimer();
            this.label.string = "Resend Code";
            this.button.interactable = true;
        }
    }
}