<script>
import { onMounted, ref, computed } from 'vue';
import * as tmImage from '@teachablemachine/image';
import { fetch as fetchPolyfill } from 'whatwg-fetch';

export default {
  setup() {
    // variable and DOM
    const videoRef = ref(null);
    const imageRef = ref(null);
    const showCamera = ref(true);
    const usermediaLoaded = ref(false);
    const firstTimePredicted = ref(false);
    const playIcon = ref('play');
    const toggleCameraIcon = ref('nosign');
    const player = ref('Nothing');
    const computer = ref('Nothing');
    const result = ref(null);
    const vs = ref(null);
    const w = 224; // width for video, image
    const h = 224; // height for video, image
    const predictionInterval = 1000 * 1; // set it lower if the pc and model could run faster
    const gamePlayInterval = 1000 * 1.5; // will play with computer every this interval
    let model;
    let predictionTimer = null;
    let gamePlayTimer = null;
    let totalClasses; // classes from model - nothing, rock, paper, scissors
    let labels;
    
    onMounted(async () => {
      if (isAndroid()) {
        // overwrite fetch so that it can load model from file system
        window.fetch = fetchPolyfill;
      }
      // load model
      const URL = 'static/model/rock-paper-scissors/';
      const modelURL = URL + 'model.json';
      const metadataURL = URL + 'metadata.json';
      model = await tmImage.load(modelURL, metadataURL);
      // run the first prediction since it takes few seconds. the subsequent predictions are almost realtime.
      totalClasses = model.getTotalClasses();
      labels = model.getClassLabels();
      classify(imageRef.value);
      // start usermedia stream on web and if browser support it
      if (!isMobile() && navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
        startUserMedia();
      }
    });
    
    const play = () => {
      if (isMobile()) {
        predictWithCanvasCamera()
      } else {
        predictWithUsermedia();
      }
    }

    const toggleCamera = () => {
      showCamera.value = !showCamera.value;
      if (!showCamera.value) {
        toggleCameraIcon.value = 'camera';
      } else {
        toggleCameraIcon.value = 'nosign';
      }
    }
  
    ...
  
  }
}
</script>