import logo from './logo.svg';
import './App.css';
import {useEffect, useRef} from "react";

import {FaceTool} from "facetool"
//1. 定义变量
let faceInstance = null

function App() {

    const videoRef = useRef();
    const canvasRef = useRef();


    useEffect( () => {
        (async()=>{
            //2. 获取FacleTool Instance，单例模式可多次执行
            faceInstance = FaceTool.getInstance();
            //是否初始化完成
            console.log(faceInstance.initFlag);
            //3. 未初始化人脸识别器（加载模型文件等）initFlag为false，内部加锁外部可同一时间多次调用
            try {
                await faceInstance.init({
                    detectorParam: {
                        modelUrl: "/models",
                    },
                });
                console.log("加载models成功");
            } catch (e) {
                //这个报错其实也不一定就是models加载失败的报错。。就是整个init函数的报错。但是吧也可以看看
                console.log("加载models失败", e);
            }
            console.log(faceInstance.initFlag);
        })()
    });

    return (
        <div className="App">
            <header className="App-header">
                <video className="video" ref={videoRef} src=""></video>
                <canvas className="canvas" ref={canvasRef}></canvas>
                <div onClick={async () => {
                    //4. 初始化参数 两种方案均可
                    await faceInstance.init({
                        video: videoRef,
                    });
                    faceInstance.canvas = canvasRef;
                    //5. 启动检测 initCheck会开始打开摄像头，但是stopCheck并不会自动关闭摄像头（这玩意以后再说吧。。。）
                    //为加载好models执行会报错提示未初始化完成 canvas，video不做强制判断。（这玩意也以后再说吧）
                    await faceInstance.restartFaceCheck()

                    /**
                     * restartFaceCheck() {
                     *         this.stopCheck();
                     *         this.initCheck();
                     *     }
                     */

                    function errorTips(code) {
                        const map = {
                            "500": "未检测到人脸",
                            "510": "人脸太偏",
                            "511": "人脸太小",
                            "512": "人脸太斜",
                            "513": "人脸太抖",
                        };
                        console.log(map[code]);
                    }

                    const step = [
                        async () => {
                            const pic = faceInstance.getFaceData();
                            if (pic) {
                                console.log({pic});
                                window.open(URL.createObjectURL(pic))
                                return true;
                            }
                            return false;
                        },
                        async (action) => {
                            if (action.eye) {
                                console.log("眨眼检测通过");
                            }
                            return !!action.eye;
                        },
                        async (action) => {
                            if (action.lips) {
                                console.log("张嘴检测通过");
                            }
                            return !!action.lips;
                        },
                        async (action) => {

                            if (!action.nodL && !action.nodR) {
                                console.log("正脸检测通过");
                            }
                            return !action.nodL && !action.nodR;
                        },
                        async (action) => {
                            if (action.nodL) {
                                console.log("摇头L检测通过");
                            }
                            return !!action.nodL;
                        },
                        async (action) => {
                            if (action.nodR) {
                                console.log("摇头R检测通过");
                            }
                            return !!action.nodR;
                        },
                        async (action) => {
                            if (action.nodB) {
                                console.log("摇头B检测通过");
                            }
                            return !!action.nodB;
                        },
                        async (action) => {
                            if (action.nodT) {
                                console.log("摇头T检测通过");
                            }
                            return !!action.nodT;
                        },
                    ];

                    let index = 0;
                    const stepInterval = setInterval(async () => {
                        const {code, action} = faceInstance.getLastStatus();
                        if (code >= 500) {
                            errorTips(code);
                        } else {
                            if (await step[index](action)) {
                                index++;
                            }
                            if (index >= step.length) {
                                clearInterval(stepInterval);
                                console.log("oj8k");
                            }
                        }
                    }, 100);
                }
                }>开始
                </div>
            </header>
        </div>
    );
}

export default App;