<template>
    <div
        v-if="state.isVisible"
        class="truck-area"
    >
        <div
            class="truck-section-view"
            :class="{'truck-idle-pos': !state.isTruckHighlighted}"
        >
            <TruckSideView
                :isTruckHighlighted="state.isTruckHighlighted"
                :isForwardArrowVisible="state.isForwardArrowVisible"
                :showUpArrowCircles="state.areUpArrowCirclesVisible"
                :showDownArrowCircles="state.areDownArrowCirclesVisible"
                :showFortyDropBox="state.showFortyDropBox"
                :showTwentyDropBoxPositionOne="state.showTwentyDropBoxPositionOne"
                :showTwentyDropBoxPositionThree="state.showTwentyDropBoxPositionThree"
                :showTwentyFootContainerPositionOne="state.isShowTwentyFootContainerPositionOne"
                :isTwentyFootContainerPositionOneSelected="state.isTwentyFootContainerPositionOneSelected"
                :twentyFootContainerIdPositionOne="state.twentyFootContainerIdPositionOne"
                :showTwentyFootContainerPositionThree="state.isShowTwentyFootContainerPositionThree"
                :isTwentyFootContainerPositionThreeSelected="state.isTwentyFootContainerPositionThreeSelected"
                :twentyFootContainerIdPositionThree="state.twentyFootContainerIdPositionThree"
                :showFortyFootContainer="state.isShowFortyFootContainer"
                :isFortyFootContainerSelected="state.isFortyFootContainerSelected"
                :fortyFootContainerId="state.fortyFootContainerId"
            />
        </div>
        <div class="trailer-selection-buttons">
            <ButtonBasic
                v-if="state.isNotConnectedButtonVisible"
                class="not-connected"
                :disabled="true"
                :label="'Not Connected'"
                :type="'tertiary'"
                :size="'lg'"
                :iconName="'close'"
            />
            <ButtonBasic
                v-if="state.isConnectedButtonVisible"
                class="connected"
                :label="'Connected'"
                :type="'tertiary'"
                :size="'lg'"
                :iconName="'confirm'"
                @click="connectedButtonClick()"
            />
        </div>
    </div>
</template>

<script>
import TruckSideView from '@navis-npm/tos-storybook/src/components/trucksideview/TruckSideView';
import ButtonBasic from '@navis-npm/tos-storybook/src/components/buttons/ButtonBasic';
import Localizations from '../../../utils/Localizations';
import {TruckAreaVuexConstants} from '../../TruckAreaVuexConstants';

export default {
    name: 'TruckArea',
    components: {
        TruckSideView,
        ButtonBasic
    },
    props: [],
    /**
     * Data section of this UI component
     * @return {Object}
     */
    data() {
        return {
            labels: Localizations.getTranslatedLabels('truckSectionView')
        };
    },
    computed: {
        /**
         * Getter for the state object in vuex
         * @return {Object}
         */
        state: function() {
            return this.$store.state;
        }
    },
    methods: {
        /**
         * Click Connected Button on Trailer Selection Form
         */
        connectedButtonClick() {
            this.$store.dispatch(TruckAreaVuexConstants.CLICK_CONNECTED_BUTTON);
        }
    }
};
</script>

<style scoped>
.truck-area {
    width: 514px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 50px;
}
.truck-section-view {
  display: flex;
  margin-left: 7%;
}
.trailer-selection-buttons {
    width: inherit;
    height: 48px;
    margin-top: 36px;
    margin-left: auto;
    margin-right: auto;
}
.not-connected {
    float: left;
}
.connected {
    float: right;
}
.truck-idle-pos {
    margin-top: 32%;
}

.forward-arrow {
  margin-top: 20%;
  margin-right: 6%;
}
</style>