<template>
   <div class="camera">
      <div class="header flex justify-between title-box">
         <button type="button" class="flex align-center" @click="goToPage('Dashboard')">
            <svg-icon type="mdi" :path="mdilChevronLeft" style="width: 50px; height: 50px;"></svg-icon>
            <p class="title"> 이전글</p>
         </button>
         <button @click="captureAndGoToPhotoDesign">
            <img src="../../../resources/img/btn19_74s_normal.png" alt="">
         </button>
      </div>
      <div class="body" ref="body">
         <div id="container" ref="container">
            <video v-if="!photoTaken" autoplay="true" ref="modalVideoElement" class="mirrored"
               @canplay="onVideoLoaded"></video>
         </div>
      </div>
   </div>
</template>


<script>
import SvgIcon from '@jamescoyle/vue-icon';
import { mdiMagnify, mdiWindowClose } from '@mdi/js';
import { mdilChevronRight, mdilChevronLeft } from '@mdi/light-js';
import axios from "axios";

export default {
   data() {
      return {
         selectedTab: 'tab1',
         username: '',
         password: '',
         mdiWindowClose: mdiWindowClose,
         mdilChevronLeft: mdilChevronLeft,
         showModal: false,
         searchOpen: false,
         photoTaken: false,
         stream: null,
         videoReady: false,
      }
   },
   methods: {
      goToPage(page) {
         this.$router.push({ name: page });
      },
      closeModal() {
         this.showModal = false;
         if (this.stream) {
            let tracks = this.stream.getTracks();
            tracks.forEach(track => track.stop());
            this.stream = null;
         }
      },
      buttonSearch() {
         this.searchOpen = true;
      },
      closeBtn() {
         this.searchOpen = false;
      },
      onVideoLoaded() {
         this.videoReady = true;
         this.adjustContainerSize();
      },
      adjustContainerSize() {
         const video = this.$refs.modalVideoElement;
         const container = this.$refs.container;
         const body = this.$refs.body;
         if (video && container) {
            container.style.width = `${video.videoWidth}px`;
            container.style.height = `${video.videoHeight}px`;
            body.style.height = `${video.videoHeight}px`;
         }
      },
      captureAndGoToPhotoDesign() {
         const video = this.$refs.modalVideoElement;
         const canvas = document.createElement('canvas');
         canvas.width = video.videoWidth;
         canvas.height = video.videoHeight;
         const ctx = canvas.getContext('2d');

         // 좌우 반전 적용
         ctx.translate(canvas.width, 0);
         ctx.scale(-1, 1);

         ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
         const imageDataUrl = canvas.toDataURL('image/png');
         this.$router.push({ name: 'PhotoDesign', query: { image: imageDataUrl } });
      }
   },
   mounted() {
      // Clear localStorage when the component is mounted
      localStorage.removeItem('capturedImage');
      
      this.videoReady = false;
      navigator.mediaDevices.getUserMedia({ video: true })
         .then(stream => {
            const modalVideo = this.$refs.modalVideoElement;
            modalVideo.srcObject = stream;
            this.stream = stream;
            modalVideo.addEventListener('loadedmetadata', this.adjustContainerSize);
         })
         .catch(error => {
            console.log("error>>>>>>>>", error);
         });
   },
   components: {
      SvgIcon
   },
}
</script>


<style>
.body {
   width: 1435px;
   height: auto;
   margin: 0 auto;
}

#container {
   position: relative;
   margin: auto;
   border: 10px #333 solid;
   display: flex;
   justify-content: center;
   align-items: center;
}

video {
   width: 100%;
   height: auto;
   background-color: #666;
}

.mirrored {
   transform: scaleX(-1);
}
</style>