<script setup>

import { onMounted, ref } from 'vue';

import { AddSound } from '../../services/Sound';
import { useCampaignService } from '~/services/Campaign';
import { ClearWindow } from '~/services/Windows';
const { SetCampaign } = useCampaignService();

const props = defineProps(['data']);
const data = props.data;

const title = ref("");

const container = ref(null);

onMounted(() => {
    title.value = data.name;
    if (data.color && container.value) {
        container.value.style.background = `linear-gradient(90deg, ${data.color}, ${data.color}44)`;
    }

    AddSound(container.value)
});

function ViewCampaign(){
    SetCampaign(data);
    ClearWindow({type: "main_menu"});
}
</script>


<template>
    <div class="campaign-entry-container" ref="container">
        <div class="main-campaign-entry-container-inner">
            <img class="campaign-icon" src="/img/def-avatar.jpg" draggable="false">
            <div class="campaign-info">
                <b>{{ title }}</b>
            </div>

            <div class="campaign-user-actions">
                <button class="btn-primary button-small sound-click" v-on:click.prevent="ViewCampaign">{{ $t('general.open')}}</button>
            </div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.button-small {
    height: 32px;
    padding: 10px;
}

.campaign-entry-container {
    background-color: var(--color-background-softer);
    width: 100%;
    user-select: none;

    border-bottom: 1px solid var(--color-border);
    &:first-child {
        border-top: 1px solid var(--color-border);
    }
}

.main-campaign-entry-container-inner {
    padding: 10px;
    display: flex;
    align-items: center;

    justify-content: center;
}

.campaign-info {
    text-align: left;
    margin-left: 10px;
}

.campaign-icon {
    width: 40px;
    height: 40px;
}

.campaign-user-actions {
    margin-left: auto;
}
</style>
