<script>
import { defineComponent } from 'vue'
import { config } from '@/main.js'
import { animate, createSpring } from 'animejs'

// icon imports
import Heart from '@/components/icons/Heart.vue'
import Play from '@/components/icons/Play.vue'
import Pause from '@/components/icons/Pause.vue'
import Deodorant from '@/components/icons/Deodorant.vue'
import Contact from '@/components/icons/Contact.vue'
import ArrowRight from '@/components/icons/ArrowRight.vue'
import ThreeDots from '@/components/icons/ThreeDots.vue'
import { useRouter } from 'vue-router'
import Checkmark2Icon from '@/components/icons/Checkmark2.vue'

export const size = 30
export const screenHeight = window.innerHeight
export const videoHeight = screenHeight - 100

export default defineComponent({
    name: 'Player',
    props: {
        className: {
            type: String,
            required: false,
            default: ''
        },
        information: {
            type: Object,
            required: true,
        },
        video: {
            type: Number,
            required: true
        }
    },
    data() {
        return {
            size,
            config,
            screenHeight,
            videoHeight
        }
    },
	setup() {
		const router = useRouter();
		return { router }
	},
    methods: {
        handlePlay(event) {
            const video = event.target;

            if (video.paused) {
                video.play()
                this.animateDetail('#play-icon')
            } else {
                video.pause()
                this.animateDetail('#pause-icon')
            }
        },

		animateDetail(id) {
			animate(id, {
				width: {
					from: '50px',
					to: '300px'
				},
				height: {
					from: '50px',
					to: '300px'
				},
				opacity: {
					from: 0,
					to: 0.5
				},

				ease: 'inExpo',
				duration: 500,
				loop: false,
				onComplete: () => {
					animate(id, {
						opacity: {
							from: 0.5,
							to: 0
						}
					})
				}
			})
		}
    },
    components: { Checkmark2Icon, Play, Pause, Heart, Deodorant, Contact, ArrowRight, ThreeDots},
})
</script>

<template>
    <div :class="`container ${className}`">
        <div class="video-container" @click="handlePlay">
            <video
                class="video-player"
                id="video-player"
                :height="videoHeight"
				loop
            >
                <source :src="config.serverURL + '/video/' + video + '/get'" type="video/mp4"></source>
            </video>

            <div class="animated-detail" id="play-icon">
                <Play size="100%" />
            </div>

            <div class="animated-detail" id="pause-icon">
                <Pause size="100%" />
            </div>

            <div class="video-information">
                <h1>{{ information.title }}</h1>
				<div class="video-author" @click="this.router.push(`/profile/${information.author.id}`)">
					<img :src="`${config.serverURL}/account/${information.author.id}/picture`" alt="profile picture" class="video-author-picture">
					<p>{{information.author.username}}</p>
					<Checkmark2Icon v-if="information.author.verified" class="checkmark" />
				</div>

                <p>{{ information.description }}</p>
            </div>
        </div>

        <div class="video-interactions">
            <button class="interaction" id="like">
                <Heart :size="size" />
                <span class="interaction-count">{{ information.likes }}</span>
            </button>
            <button class="interaction" id="dislike">
                <Deodorant :size="size" />
                <span class="interaction-count">{{ information.dislikes }}</span>
            </button>
            <button class="interaction" id="comment">
                <Contact :size="size" />
                <span class="interaction-count">{{ information.comments }}</span>
            </button>
            <button class="interaction" id="share">
                <ArrowRight :size="size" />
                <span class="interaction-count">{{ information.shares }}</span>
            </button>
            <button class="interaction" id="more">
                <ThreeDots :size="size" />
                <span class="interaction-count">More</span>
            </button>
        </div>
    </div>
</template>

<style scoped>
.interaction {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    pointer-events: all;

    width: 60px;
    height: 60px;

    background-color: transparent;
    border: none;

    text-shadow: #000 1px 0 10px;
    font-family: "Pinyon Script", cursive;
    font-size: 20px;
}

.interaction:hover {
    cursor: pointer;
    animation-name: interaction;
    animation-duration: 1s;
    animation-iteration-count: infinite;
}

.video-interactions {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
    z-index: 2;
    gap: 10px;
    pointer-events: none;

    transform: translateX(-35px);
}

.video-information {
    width: 100%;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
	gap: 0px;

    max-width: 100%;

    background: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(255, 255, 255, 0) 100%);
    border-radius: 15px;

    text-shadow: #000 1px 0 10px;
    color: var(--text-color);

    position: absolute;
    z-index: 2;
}

.video-player {
    border-radius: 15px;
    min-width: 300px;
    max-width: 100%;
}

.container {
    height: 100%;
    margin: 0;

    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

@media only screen and (max-width: 768px) {
    .container {
        height: calc(100vh - 100px);
    }
}

.video-container {
    display: flex;
    flex-direction: column;

    justify-content: flex-end;
    align-items: center;

    transform: translateX(35px);
}

#like {
    filter: grayscale(100%);
}

#dislike {
    filter: grayscale(100%);
}

.animated-detail {
    position: fixed;
    inset: 0px;
    width: 50px;
    height: 50px;
    max-width: 100vw;
    max-height: 100dvh;
    margin: auto;

    z-index: 100;
    pointer-events: none;
}

#play-icon {
    opacity: 0;
}

#pause-icon {
    opacity: 0;
}

.video-author {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	gap: 20px;

	font-size: 20px;
}

.video-author:hover {
	animation-name: interaction;
	animation-duration: 0.5s;
	animation-iteration-count: infinite;
	cursor: pointer;
}

.video-author-picture {
	width: 50px;
	height: 50px;
	border-radius: 100%;
}

.checkmark {
	width: 40px;
	height: 30px;
}
</style>
