<template>
    <div class="sidbar__wrpr flex flex-col">

        <div class="flex items-center justify-between w-full left_sidebar_head">
            <h3 class="sidbar__title uppercase">RECORD</h3>
            <button class="sidbar__close ml-2.5" v-html="icons['close-my-files-arrow.svg']"></button>
        </div>
        <div class="sidbar__body rercord">
            <ul class="rercord-list">
                <li class="record-list__item mb-3"
                    v-for="(item, index) in recordingTypes"
                    :key="index" :class="{ 'active': item.title === (currentRecord && currentRecord.typeName)}"
                    @click="addRecord(item)"
                >
                    <div class="record-list__item-img">
                        <img :src="item.img" alt="">
                    </div>
                    <div class="record-list__item-title">
                        {{ item.title }}
                    </div>
                </li>
            </ul>

            <div class="current-records__item" v-if="currentRecord" :ref="'record-' + currentRecord.id"
                :style="'top:' + currentRecord.top + 'px'">
                <div class="current-records__item-move" :ref="'record-'+currentRecord.id+'-caret'">
                    <inline-svg :src="require(`@/assets/img/move.svg`)"/>
                </div>

                <div class="flex items-center cursor-pointer" @click="toggleRecord(currentRecord)">
                    <inline-svg v-if="currentRecord.isActive" :src="require(`@/assets/img/record-play.svg`)"/>
                    <inline-svg v-if="!currentRecord.isActive" :src="require(`@/assets/img/record-stop.svg`)"/>
                </div>

                <div class="current-records__item-micro p-2"
                    :class="{'active': currentRecord.isActive, 'context': contextMenu.open}"
                    @click="currentRecord.isMicroActive = !currentRecord.isMicroActive"
                    @contextmenu.prevent="openContextMenu($event, currentRecord)">
                    <inline-svg v-if="!currentRecord.isMicroActive" :src="require(`@/assets/img/micro-disabled.svg`)"/>
                    <inline-svg v-if="currentRecord.isMicroActive" :src="require(`@/assets/img/micro-enabled.svg`)"/>
                </div>

                <div class="flex items-center current-records__item-timer" :class="{'active': currentRecord.isActive}">
                    <span>
                        <span>{{ currentRecord.time | time }}</span>
                        <!-- / <span style="color: #a8a6a6;">{{ currentRecord.max | time }}</span> -->
                    </span>
                </div>

                <div class="current-records__item-close p-2" @click="closeRecord">
                    <inline-svg :src="require(`@/assets/img/record-close.svg`)"/>
                </div>
            </div>

            <ul class="custom-select__dropdown context-menu record active"
				v-if="contextMenu.open"
				style="position: fixed;"
				:style="{
					top: contextMenu.top + 'px',
					left: contextMenu.left + 'px'
				}" v-click-outside="closeMenu">
				<li class="custom-select__item flex items-center cursor-pointer pl-3"
                    v-for="(device, index) in contextMenu.currentRecord.devices"
                    :key="index" :class="{'active': device.title === contextMenu.currentRecord.selectedDevice}"
                    @click="$set(contextMenu.item, 'selectedDevice', device.title)">
					<div class="flex items-center cursor-pointer">
						<span class="ml-2">{{ device.title }}</span>
					</div>
				</li>
			</ul>
        </div>
    </div>
</template>

<script>
import { svgIcons } from "@/helpers/index.js";

export default {
    filters: {
        time: function(ms) {
            let secNum = ms / 1000;
            let minutes = parseInt(secNum / 60);
            let seconds = secNum % 60 || 0;

            if (minutes < 10) {minutes = "0"+minutes;}
            if (seconds < 10) {seconds = "0"+seconds;}

            return  `${minutes}:${seconds}`;
        }
    },

    data() {
        return {
            icons: svgIcons,
            recordHeight: 42,
            contextMenu: {
				open: false,
				left: 0,
				top: 0,
				item: null,
			},
        }
    },

    computed: {
        recordingTypes() {
            return this.$store.state.recorderState.recordingTypes;
        },

        currentRecord: {
            get() { return this.$store.state.recorderState.recordingType; },
            set(val) { this.$store.state.recorderState.recordingType = val; }
        }
    },

	methods: {
        async addRecord(recordType) {
            const record = {
                type: recordType.type,
                typeName: recordType.title,
                isActive: false,
                isMicroActive: false,
                time: 0,
                interval: null,
                id: Math.floor(Math.random() * 10000),
                // index: this.currentRecords.length,
                top: window.innerHeight - this.recordHeight - 10,//window.innerHeight - (this.recordHeight * (this.currentRecords.length + 1 )) - 10 * this.currentRecords.length,
                selectedDevice: 'None',
                devices: [
                    {
                        title: 'Default - Microphone #1 (High Definition Audio Device)'
                    },
                    {
                        title: 'Microphone #2 (High Definition Audio Device) '
                    },
                    {
                        title: 'Microphone #3 (High Definition Audio Device) '
                    },
                    {
                        title: 'None'
                    }
                ]
            }

            // this.currentRecords.push(record);

            if (this.currentRecord) {
                await this.closeRecord();
            }

            this.currentRecord = record;
            setTimeout(() => {
                this.dragElement(this.$refs[`record-${record.id}`], this.$refs[`record-${record.id}-caret`])
            }, 30)
        },

        toggleRecord(record) {
            if (!record.isActive) {
                record.interval = setInterval(() => {
                    // if (record.time == record.max) {
                    //     return clearInterval(this.interval);
                    // }

                    record.time += 1000;
                }, 1000);

            } else {
                clearInterval(record.interval)
            }

            this.$set(record, 'isActive', !record.isActive);
        },

        dragElement(elmnt, caret) {
            if (!elmnt) return;

            let pos1 = 0,
                pos2 = 0,
                pos3 = 0,
                pos4 = 0;

            const dragMouseDown = (e) => {
                console.log(e)
                e = e || window.event;
                e.preventDefault();

                // get the mouse cursor position at startup:
                pos3 = e.clientX;
                pos4 = e.clientY;
                document.onmouseup = closeDragElement;

                // call a function whenever the cursor moves:
                document.onmousemove = elementDrag;
            }

            const elementDrag = (e) => {
                e = e || window.event;
                e.preventDefault();

                // calculate the new cursor position:
                pos1 = pos3 - e.clientX;
                pos2 = pos4 - e.clientY;
                pos3 = e.clientX;
                pos4 = e.clientY;

                // set the element's new position:
                elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
                elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
            }

            const closeDragElement = () => {
                /* stop moving when mouse button is released:*/
                document.onmouseup = null;
                document.onmousemove = null;
            }

            if (caret) {
                /* if present, the header is where you move the DIV from:*/
                caret.addEventListener('mousedown', dragMouseDown);
            } else {
                /* otherwise, move the DIV from anywhere inside the DIV:*/
                elmnt.addEventListener('mousedown', dragMouseDown);
            }
        },

		openContextMenu(event, item) {
            const contextHeight = 144;

			this.contextMenu.left = event.clientX;
			this.contextMenu.top = event.clientY + contextHeight > window.innerHeight ? window.innerHeight - contextHeight : event.clientY ;
			this.contextMenu.open = true;
			this.contextMenu.item = item;
		},

		closeMenu(){
			this.contextMenu = {
				open: false,
				left: 0,
				top: 0,
				item: null,
			}
		},

        async closeRecord() {
            if (!this.currentRecord.time) return this.currentRecord = null;

            if (this.currentRecord.type === 'video') {
                this.openPopup('RecordVideo');
            } else {
                this.openPopup('RecordAudio');
            }

            return new Promise((res, rej) => {
                setTimeout(() => {
                    Array.from(document.querySelectorAll('.record-btn')).forEach(node => {
                        node.addEventListener('click', () => {
                            this.currentRecord = null;
                            res();
                        })
                    })
                }, 50)
            })

            // this.currentRecords.splice(index, 1)
        },

		openPopup(value) {
            this.$store.commit('openPopup', value);
        },
	},
}
</script>