<template>
    <div
        v-if="isVisible"
        class="last-known-position"
        :class="theme"
    >
        <div class="top-text">
            {{ label }}
        </div>
        <div class="yard-position">
            {{ lastKnownPosition }}
        </div>
    </div>
</template>

<script>
import {MiddleSectionPresenterOnePage} from '../../../presenters/MiddleSectionPresenterOnePage';
import Localizations from '../../../utils/Localizations';
export default {
    name: 'LastKnownPosition',
    props: {
        presenter: {
            type: MiddleSectionPresenterOnePage,
            required: true
        },
    },
    /**
     * Data of vueJS component
     * @returns {Object}
     */
    data() {
        return {
            isVisible: false,
            lastKnownPosition: '',
            theme: 'theme-light',
            label: Localizations.getTranslatedLabels('middleSection')['viewingSectionLabel']
        };
    },
    methods: {
        /**
         * Function to set the last known pos to be visible or not
         * @param {boolean} inIsShow
         */
        setIsVisible(inIsShow) {
            this.isVisible = inIsShow;
        },
        /**
         * Function to set the last known pos
         * @param {string} inLastKnownPosition
         */
        setLastKnownPosition(inLastKnownPosition) {
            this.lastKnownPosition = inLastKnownPosition;
        },
        /**
         * Function to toggle theme between light/dark mode
         */
        toggleTheme() {
            this.theme = this.theme === 'theme-light' ? 'theme-dark' : 'theme-light';
        },
    }
};
</script>

<style scoped>
    .top-text {
        font-size: 12px;
      color: var(--color-container-text);
    }

    .yard-position {
        font-size: 24px;
      color: var(--color-container-text);
    }
</style>