<template>
    <Card style="width: 100%; margin-bottom: 10px">
       
        <p slot="title" style="font-size: 18px; font-weight: bold; color: #464c5b;">
            <Icon type="md-code-working" size="20" style="color: #464c5b;" />
            Reconstruction Process
        </p>
        <Row style="height: 100%;">
            <Col span="18" style="height: 100%;">
                <Card
                    style="position: relative; height: 100%; "
                    dis-hover>
                    <div style="width: 100%; height: 100%;">
                        <canvas ref="threeCanvas_pts" style="width: 100%; height: 600px;"></canvas>
                    </div>
                </Card>
            </Col>
            <Col span="1" style="display: flex; align-items: center; justify-content: center;">
                <Divider type="vertical" style="height: 100%;" />
            </Col>
            <Col span="5">
                <p style="font-size: 14px; font-weight: bold; color: #464c5b;">
                    Current Frame Information
                </p>
                <Card style="margin-top: 5px; margin-bottom: 5px; width: 100%;">
                    <div >
                        Step:
                        <span style="color: green; font-size: 14px;font-weight: bold;">{{ curr_frame_info["step"] }}</span>
                    </div>
                    <div >
                        Frame ID:
                        <span style="color: green; font-size: 14px;font-weight: bold;">{{ curr_frame_info["frame_id"] }}</span>
                    </div>
                    <div >
                        Coverage Rate(CR):
                        <span style="color: green; font-size: 14px;font-weight: bold;">{{ curr_frame_info["coverage_rate"] }}%</span>
                    </div>
                    <div >
                        Delta CR:
                        <span style="color: green; font-size: 14px;font-weight: bold;">+{{ curr_frame_info["delta_CR"] }}%</span>
                    </div>
                </Card>
                <Divider/>
                <p style="font-size: 14px; font-weight: bold; color: #464c5b;">
                    Depth(L)
                </p>
                <Card :style="{
                    marginTop: '5px', 
                    marginBottom: '5px', 
                    paddingBottom: rpCurrDepth ? '0' : '62.5%'
                }">
                <img :src="`data:image/png;base64,${rpCurrDepth}`" alt="Depth Image" style="width: 100%;" v-if="rpCurrDepth" @click="showImage(`data:image/png;base64,${rpCurrDepth}`)"/>
                </Card>
                <Divider/>
                <p style="font-size: 14px; font-weight: bold; color: #464c5b;">
                    Mask(L)
                </p>
                <Card :style="{
                    marginTop: '5px', 
                    marginBottom: '5px', 
                    paddingBottom: rpCurrMask ? '0' : '62.5%'
                }">
                <img :src="`data:image/png;base64,${rpCurrMask}`" alt="Depth Image" style="width: 100%;" v-if="rpCurrMask" @click="showImage(`data:image/png;base64,${rpCurrMask}`)"/>
                </Card>
            </Col>
        </Row>
        <Divider/>
        <Row>
            <p style="font-size: 14px; font-weight: bold; color: #464c5b;">
                    Reconstruction Process: [<span style="color: green;">{{ curr_step }}</span>/<span>{{ seqFrameData.length -1 }}</span>]
            </p>
            <Slider v-model="curr_step" :step="1" style="width: 100%;" :max="seqFrameData.length-1 >=0 ? seqFrameData.length-1:0"></Slider>
        </Row>
    </Card>
</template>

<script>
import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
export default {
  props: {
    seqFrameData: Array,
    modelPts: Array,
  },
  data() {
    return {
        rpCurrDepth: null,
        rpCurrMask: null,

        pts_scene: null,
        pts_camera: null,
        pts_renderer: null,
        pts_controls: null,

        curr_step: 0,

        model_pts: null,

        combined_point_cloud: [],
        new_point_cloud: [],

        best_seq: null,

        curr_frame_info: {
                "step": 0,
                "frame_id":0,
                "coverage_rate": 0,
                "delta_CR": 0,
                "combined_points": [],
                "new_points": [],
            },

      
    };
  },
  watch: {
    seqFrameData(val) {
        if (val.length > 0) {
            this.rpCurrDepth = val[0].data.depth;
            this.rpCurrMask = val[0].data.mask;
            this.curr_step = 0;
            this.curr_frame_info["step"] = 0;
            this.curr_frame_info["frame_id"] = val[0]["frame_id"];
            this.curr_frame_info["coverage_rate"] = val[0]["data"]["coverage_rate"];
            this.curr_frame_info["delta_CR"] = val[0]["data"]["delta_CR"];
            this.curr_frame_info["combined_point_cloud"] = val[0]["data"]["combined_point_cloud"];
            this.curr_frame_info["new_point_cloud"] = val[0]["data"]["new_point_cloud"];
            this.updatePointCloud();
            this.view_cam_pose_list = [];
            for (let i = 0; i < val.length; i++) {
                this.view_cam_pose_list.push(val[i].data.cam_to_world);
            }
            
        }
        
    },
    curr_step (val) {
        this.rpCurrDepth = this.seqFrameData[val]["data"]["depth"];
        this.rpCurrMask = this.seqFrameData[val]["data"]["mask"];
        this.curr_frame_info["step"] = val;
        this.curr_frame_info["frame_id"] = this.seqFrameData[val]["frame_id"];
        this.curr_frame_info["coverage_rate"] = this.seqFrameData[val]["data"]["coverage_rate"];
        this.curr_frame_info["delta_CR"] = this.seqFrameData[val]["data"]["delta_CR"];
        this.curr_frame_info["combined_point_cloud"] = this.seqFrameData[val]["data"]["combined_point_cloud"];
        this.curr_frame_info["new_point_cloud"] = this.seqFrameData[val]["data"]["new_point_cloud"];
        this.updatePointCloud();
    }
  },
  mounted() {
    this.initThreeJS_pts(); 
    this.animate_pts();
  },
  
  methods: {
    initThreeJS_pts() {
        const width = this.$refs.threeCanvas_pts.clientWidth;
        const height = this.$refs.threeCanvas_pts.clientHeight;

        this.pts_scene = new THREE.Scene();

        this.pts_camera = new THREE.PerspectiveCamera(75, width / height, 0.001, 1000);
        this.pts_camera.position.z = 2;

        this.pts_renderer = new THREE.WebGLRenderer({ canvas: this.$refs.threeCanvas_pts });
        this.pts_renderer.setSize(width, height);

        this.pts_controls = new OrbitControls(this.pts_camera, this.pts_renderer.domElement);
        

        this.pts_scene.rotation.x = -Math.PI / 2;
        const axesHelper = new THREE.AxesHelper(5);
        this.pts_scene.add(axesHelper);
    },

    animate_pts() {
        requestAnimationFrame(() => this.animate_pts());
        this.pts_renderer.render(this.pts_scene, this.pts_camera);
    },

    updatePointCloud() {
        
        if (this.combinedPointCloudMesh) {
            this.pts_scene.remove(this.combinedPointCloudMesh);
        }
        if (this.newPointCloudMesh) {
            this.pts_scene.remove(this.newPointCloudMesh);
        }
        this.combinedPointCloudMesh = this.createPointCloud(this.curr_frame_info["combined_point_cloud"], 0x0000ff);
        this.newPointCloudMesh = this.createPointCloud(this.curr_frame_info["new_point_cloud"], 0xff0000);

        this.pts_scene.add(this.combinedPointCloudMesh);
        this.pts_scene.add(this.newPointCloudMesh);
        
    },


    createPointCloud(pointCloudData, color) {
        const geometry = new THREE.BufferGeometry();
        const vertices = new Float32Array(pointCloudData.flat());

        geometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3));

        const material = new THREE.PointsMaterial({
            size: 0.005,
            color: color,
        });

        return new THREE.Points(geometry, material);
    },
    showImage(url){
        this.$emit('show-img', url);
    }
  },
};

</script>