// pages/frame/frame.js
const { get_phone_model } = require("../../utils");
const { data_url_from_frame } = require("../../precheck");

Page({

    /**
     * Page initial data
     */
    data: {
        uploaded: 0,
        failed: 0,
        session_id: null,
        frame_id: 0,
        next_upload_time: 0,
        uploading: false,
    },

    /**
     * Lifecycle function--Called when page load
     */
    onLoad(options) {

    },

    /**
     * Lifecycle function--Called when page is initially rendered
     */
    onReady() {

    },

    /**
     * Lifecycle function--Called when page show
     */
    onShow() {

    },

    /**
     * Lifecycle function--Called when page hide
     */
    onHide() {

    },

    /**
     * Lifecycle function--Called when page unload
     */
    onUnload() {

    },

    /**
     * Page event handler function--Called when user drop down
     */
    onPullDownRefresh() {

    },

    /**
     * Called when page reach bottom
     */
    onReachBottom() {

    },

    /**
     * Called when user click on the top right corner to share
     */
    onShareAppMessage() {

    },

    set_pos() {
        const session_id = new Date().toISOString() + "_pos";
        this.setData({
            label: "pos",
            pos_class: "active",
            neg_class: "",
            stop_class: "",
            session_id,
        })
    },
    
    set_neg() {
        const session_id = new Date().toISOString() + "_neg";
        this.setData({
            label: "neg",
            pos_class: "",
            neg_class: "active",
            stop_class: "",
            session_id,
        })
    },
    stop() {
        this.setData({
            "label": null,
            pos_class: "",
            neg_class: "",
            stop_class: "active",
        })
    },
    setup_camera() {
        console.log("setup_camera");
        const ctx = wx.createCameraContext();
        ctx.setZoom({
            zoom: 2
        })
        const listener = ctx.onCameraFrame((res) => { this.handle_frame(res) });
        listener.start();
        this.ctx = ctx;
    },
    handle_frame(res) {
        if (!this.data.label || this.data.uploading) {
            return;
        }
        const now = Date.now();
        if (now < this.data.next_upload_time) {
            return;
        }
        console.log("uploading frame", this.data.frame_id);
        const session_id = this.data.session_id;
        const frame_id = this.data.frame_id;
        this.setData({
            frame_id: frame_id + 1,
            uploading: true,
        });
        const url = `https://themblem.com/api/v5/frame/${session_id}/${frame_id}`;
        var uca1 = new Uint8ClampedArray(res.data);
        var uca = new Uint8ClampedArray(uca1);
  
        const image_data_url = data_url_from_frame(res.width, res.height, uca);
        wx.request({
            url,
            method: "POST",
            data: {
                label: this.data.label,
                phone_model: get_phone_model(),
                image: image_data_url,
            },
            success: (res) => {
                this.setData({
                    uploaded: this.data.uploaded + 1,
                    next_upload_time: now + 500,
                    uploading: false,
                });
            },
            fail: (res) => {
                this.setData({
                    failed: this.data.failed + 1,
                    next_upload_time: now + 500,
                    uploading: false,
                });
            },
        });
    },
    zoom_1x() {
        this.ctx.setZoom({
            zoom: 1,
        });
    },
    zoom_2x() {
        this.ctx.setZoom({
            zoom: 2,
        });
    },
    zoom_4x() {
        this.ctx.setZoom({
            zoom: 4,
        });
    },
})