<script>
import { defineComponent } from 'vue'
import { config } from '@/main.js'
import Deodorant from '@/components/icons/Deodorant.vue'
import Heart from '@/components/icons/Heart.vue'
import Contact from '@/components/icons/Contact.vue'
import ArrowRight from '@/components/icons/ArrowRight.vue'
import { useRouter } from 'vue-router'
import Checkmark2Icon from '@/components/icons/Checkmark2.vue'

export default defineComponent({
    name: 'VideoSearchResult',
    data () {
        return {
            config,
            size: 30
        }
    },
    setup() {
        const router = useRouter()
        return { router }
    },
    props: {
        id: {
            type: Number,
            required: true
        },
        title: {
            type: String,
            required: true,
        },
        author: {
            type: String,
            required: true,
        },
        likes: {
            type: Number,
            required: true,
        },
        dislikes: {
            type: Number,
            required: true,
        },
        comments: {
            type: Number,
            required: true,
        },
        shares: {
            type: Number,
            required: true,
        },
		authorId: {
			type: Number,
			required: true,
		},
		verified: {
			type: Boolean,
			required: true
		}
    },

    components: { Checkmark2Icon, Heart, Deodorant, Contact, ArrowRight},
})
</script>

<template>
    <div class="search-result">
        <img :src="`${config.serverURL}/video/${id}/thumbnail`" class="search-result-thumbnail" @click="this.router.push(`/explore/videos?video=${id}`)" />
        <div class="search-result-details">
            <h1 @click="this.router.push(`/explore/videos?video=${id}`)">{{title}}</h1>
            <span class="search-result-author" @click="this.router.push(`/profile/${id}`)">
					<img :src="`${config.serverURL}/account/${authorId}/picture`" class="search-result-author-image" />
					<p>{{author}}</p>
					<Checkmark2Icon class="checkmark" v-if="verified" />
				</span>
            <div class="search-result-interactions">
					<span class="search-result-interaction">
						<Heart :size="size" />
						<span class="search-result-interaction-count">{{likes}}</span>
					</span>
                <span class="search-result-interaction">
						<Deodorant :size="size" />
						<span class="search-result-interaction-count">{{dislikes}}</span>
					</span>
                <span class="search-result-interaction">
						<Contact :size="size" />
						<span class="search-result-interaction-count">{{comments}}</span>
					</span>
                <span class="search-result-interaction">
						<ArrowRight :size="size" />
						<span class="search-result-interaction-count">{{shares}}</span>
					</span>
            </div>
        </div>
    </div>
</template>

<style scoped>
.search-result {
    display: flex;
    flex-direction: row;

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

    gap: 10px;
}

.search-result-details {
    display: flex;
    flex-direction: column;
    gap: 0px;
}

.search-result-thumbnail {
    height: 150px;
    border-radius: 5px;
}

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

.search-result-details h1:hover {
    cursor: pointer;
    animation-name: interaction;
    animation-duration: 1s;
    animation-iteration-count: infinite;

    color: var(--accent-color);
}

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

    color: var(--accent-color);
}

.search-result-interactions {
    display: flex;
    flex-direction: row;
    gap: 10px;
}

.search-result-interaction {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.search-result-author-image {
    width: 40px;
    height: 40px;
    border-radius: 100%;
}

.search-result-author {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;

    gap: 10px;
}

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