<template>
    <div
        class="lane-change-area"
        :class="theme"
        style="width: 100%"
    >
        <div
            v-if="state === 'single'"
            style="margin-left: 9px; margin-top: 8px;"
        >
            {{ labels.blockChangeTitle }}
        </div>
        <div>
            <div
                class="container"
                :theme="theme"
                :class="itemWidth"
                @click="jobClicked()"
            >
                <div class="number">
                    <span class="containerNumber">
                        <span>{{ labels.laneChangeTitle }}</span>
                    </span>
                </div>
                <div
                    class="properties"
                    :class="state"
                >
                    <div class="property">
                        <label>{{ labels.originTitle }}</label>
                        <span class="propertyValue">{{ getOrigin }}</span>
                    </div>
                    <div class="property">
                        <label>{{ labels.destinationTitle }}</label>
                        <span class="propertyValue">{{ laneChangePlan.destBlockName }}</span>
                    </div>
                    <div class="property">
                        <label>{{ labels.useCrossLaneTitle }}</label>
                        <span class="propertyValue">{{ laneChangePlan.crossLaneMsg }}</span>
                    </div>
                    <div class="propertyIcons">
                        <AppIcon name="site" />
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import Localizations from '../../utils/Localizations';
import GlobalState from '../../state/GlobalState';
import {LaneChangePlan} from '../../aggregates/LaneChangePlan';
import AppIcon from '@navis-npm/tos-storybook/src/components/icons/AppIcon';

export default {
    name: 'LaneChangeItem',
    components: {AppIcon},
    props: {
        presenter: {
            type: Object,
            required: false,
            default: null
        },
        laneChangePlan: {
            type: LaneChangePlan,
            required: true
        },
        state: {
            type: String,
            required: true,
        },
        theme: {
            type: String,
            required: true,
        },
        cheLastKnownPos: {
            type: String,
            required: true
        }
    },
    /**
     * Data section of this UI component
     * @return {Object}
     */
    data: function() {
        return {
            labels: Localizations.getTranslatedLabels('jobItem'),
            highlight: 'normal',
            isSinglePage: GlobalState.isOnePage(),
        };
    },
    computed: {
        /**
         * Function to return itemWidth
         * @returns {Object}
         */
        itemWidth() {
            return {
                single: this.state === 'single',
                full: this.state === 'full'
            };
        },
        /**
         * Getter for Origin of Lane change plan
         * returns LKP first, if LKP not present then returns Origin block name else '-'
         * @returns {string}
         */
        getOrigin() {
            if(this.cheLastKnownPos != null) {
                return this.cheLastKnownPos;
            }
            else if(this.laneChangePlan.originBlockName != null) {
                return this.laneChangePlan.originBlockName;
            }
            return '-';
        }
    },
    methods: {
        /**
         * Callback function when job is clicked
         */
        jobClicked()  {
            this.highlight = 'selected';
            this.$emit('clicked', this.index);
        },
    }
};
</script>

<style scoped>
    table {
        border-collapse: collapse;
    }
    tr>td {
        padding-bottom: 0;
    }
    .single {
        width: 680px;
    }
    .fullDeck table {
        width: 95%
    }


    .container {
        background-color: var(--color-container-background);
        color: var(--color-container-text);
        box-shadow: 0 0 4px var(--color-secondary-40);
        border-left: 8px solid var(--color-info);
        height: 65px;
        min-width: 320px;
        border-radius: 4px;
        margin-bottom: 8px;
        padding: 8px;
    }
    .properties {
        display: flex;
        justify-content: space-between;
        margin-top: 4px;
    }
    .number > * {
        margin: 0;
        padding: 0;
        line-height: 28px;
    }
    label {
        display: block;
        font-size: 12px;
    }
    .containerNumber {
        font-size: 32px;
        font-weight: 600;
    }
    .property:nth-child(2) {
        margin-left: 30px;
        min-width: 40px;
    }
    .property:nth-child(3) {
        margin-left: 70px;
    }
    .property {
        line-height: 90%;
    }
    .full .property {
        width: calc((100% - 96px) / 3);
        margin-left: 0;
    }
    .propertyIcons {
        filter: var(--filter-icon);
        display: flex;
        justify-content: flex-end;
        align-items: flex-end;
        width: 96px;
        height: 32px;
    }
    .propertyValue {
        font-size: 22px;
        position: relative;
        top: 8px;
    }
</style>
