<template>
    <div
        id="laneChangeView"
        :class="theme"
    >
        <div
            v-if="laneChangeMode"
            class="title"
        >
            <label> {{ labels.laneChangeInstructionPart1 }}<br> {{ labels.laneChangeInstructionPart2 }} </label>
        </div>
    </div>
</template>

<script>
import Localizations from '../../../utils/Localizations';
import {MiddleSectionPresenter} from '../../../presenters/MiddleSectionPresenter';
export default {
    name: 'LaneChangeInstruction',
    components: {},
    props: {
        middleSectionPresenter: {
            type: MiddleSectionPresenter,
            required: false,
            default: null
        }
    },
    /**
     * Data section of this UI component
     * @return {Object}
     */
    data: function() {
        return {
            laneChangeMode: false,
            theme: 'theme-light',
            labels: Localizations.getTranslatedLabels('middleSection')
        };
    },
    methods: {
        /**
         * Set the lane change mode for display
         * @param {boolean} inIsLaneChangeMode
         */
        setLaneChangeViewVisible(inIsLaneChangeMode) {
            this.laneChangeMode = inIsLaneChangeMode;
        },
        /**
         * Function to toggle theme between dark/light mode
         */
        toggleTheme(){
            this.theme= this.theme=== 'theme-light' ? 'theme-dark' : 'theme-light';
        }
    }
};
</script>

<style scoped>
    .title {
        font-weight: 400;
        text-align: center;
        margin-top: 100px;
        color: var(--color-container-text);
    }
</style>