<template>
    <div
        v-if="isVisible"
        class="truckIconArea"
    >
        <div class="arrowContainer">
            <img
                v-if="isDestination"
                class="arrow"
                src="/resources/static/images/arrowLower.svg"
                alt="arrow lower"
            />
            <img
                v-else
                class="arrow"
                src="/resources/static/images/arrowRaise.svg"
                alt="arrow raise"
            />
        </div>
        <div class="truckBox">
            <img
                class="truck"
                src="/resources/static/images/Truck.svg"
                alt="truck icon"
            />
            <div class="truckBackground"></div>
        </div>
    </div>
</template>

<script>
import {MiddleSectionPresenterOnePage} from '../../../presenters/MiddleSectionPresenterOnePage';
export default {
    name: 'TruckIcon',
    props: {
        presenter: {
            type: MiddleSectionPresenterOnePage,
            required: true
        },
    },
    /**
     * Data of vueJS component
     * @returns {Object}
     */
    data() {
        return {
            isVisible: false,
            isDestination: false
        };
    },
    methods: {
        /**
         * Setter for Visibility of TruckIcon vue component
         * @param {boolean} inIsShow
         */
        setIsVisible(inIsShow) {
            this.isVisible = inIsShow;
        },
        /**
         * Setter for Is Destination is true or false
         * @param {boolean} inIsDestination
         */
        setIsDestination(inIsDestination) {
            this.isDestination = inIsDestination;
        }
    }
};
</script>

<style scoped>
    .truckIconArea {
        position: relative;
        height: 100%;
        top: calc(100% - 140px);
        overflow-y: hidden;
    }

    .truckBox {
        position: relative;
        top: 30px;
    }

    .truckIconArea img {
        display: block;
        position: absolute;
        left: 9px;
        top: 9px;
        width: 36px;
        height: 36px;
        z-index: 2;
    }

    .arrowContainer  {
        position: relative;
        width: 30px;
        height: 30px;
    }

    .truckBackground {
        position: absolute;
        width: 50px;
        height: 50px;
        background-color: var(--color-white);
        border-style: dashed;
        border-width: 2px;
        border-color: var(--color-info);
        z-index: 1;
    }
</style>