<template>
    <div class="containerArea">
        <div
            class="containerAreaBar"
            :class="containerSizeAndPosition"
        >
            <div
                class="leftBar"
                :class="{selected: isSelected}"
            >
                <span class="containerText">{{ containerPrefix() }}</span>
                <span class="containerText"><strong>{{ containerSubID() }}</strong></span>
            </div>
        </div>
    </div>
</template>

<script>

import {UnitModel} from '@navis-npm/tos-models-js/src/aggregates/rail/model/UnitModel';

export default {
    name: 'RailContainer',
    props: {
        unitModel: {
            type: UnitModel,
            required: true
        },
        isSelected: {
            type: Boolean,
            required: true
        },
        max20s: {
            type: Number,
            required: true
        }
    },
    computed: {
        /**
         * Getter for container Size and Position
         * @returns {Object}
         */
        containerSizeAndPosition: function() {
            const slotPosition = this.getSlotPosition();
            const numberOf20s = this.max20s;
            const isContainer40 = this.isContainer40();
            return {
                one: numberOf20s === 1,
                two: !isContainer40 && numberOf20s === 2,
                two40: isContainer40 && numberOf20s === 2,
                three: !isContainer40 && numberOf20s === 3,
                three40: isContainer40 && numberOf20s === 3,
                four: (!isContainer40) && numberOf20s === 4,
                four40: isContainer40 && numberOf20s === 4,
                five: !isContainer40 && numberOf20s === 5,
                five40: isContainer40 && numberOf20s === 5,
                six: !isContainer40 && numberOf20s === 6,
                six40: isContainer40 && numberOf20s === 6,
                slot1: slotPosition === '1',
                slot2: slotPosition === '2',
                slot3: slotPosition === '3',
                slot4: slotPosition === '4',
                slot5: slotPosition === '5',
                slot6: slotPosition === '6'
            };
        }
    },
    methods: {
        /**
         * Whether container is 40 foot or not
         * @returns {boolean}
         */
        isContainer40(){
            let unitISO = this.unitModel.unitEqType;
            return unitISO.startsWith('4');
        },
        /**
         * Getter for slot position
         * @returns {string}
         */
        getSlotPosition() {
            const position = this.unitModel._unitPosition.split('-');
            const positionEnd = position[position.length - 1];
            return positionEnd[2];
        },
        /**
         * Getter for Container Prefix
         * @returns {string}
         */
        containerPrefix(){
            const prefix = this.unitModel.unitId.substring(0, 4);
            return prefix;
        },
        /**
         * Getter for Container Sub ID
         * @returns {string}
         */
        containerSubID(){
            const unitID = this.unitModel.unitId;
            const suffix = unitID.substring(4, unitID.length-1)
                + '\xa0' + unitID[unitID.length-1];
            return suffix;
        },

    }
};
</script>

<style scoped>
    .containerAreaBar {
        width: 50%;
        height: 100%;
        background-color: var(--color-white);
        border-radius: 2px;
        z-index: 12;
        position: absolute;

    }

    .containerAreaBar.one  {
        width: 100%;
    }
    .containerAreaBar.two40 {
        width: 100%;
    }
    .containerAreaBar.two {
        width: 50%;
    }
    .containerAreaBar.four40 {
        width: 50%;
    }
    .containerAreaBar.four40 {
        width: 50%;
    }
    .containerAreaBar.two.slot1 {
        transform: translateX(0);
    }
    .containerAreaBar.two40.slot1 {
        transform: translateX(0);
    }
    .containerAreaBar.two.slot2 {
        transform: translateX(100%);
    }
    .containerAreaBar.three {
        width: 33.3%;
    }
    .containerAreaBar.three40 {
        width: 66.6%
    }
    .containerAreaBar.three.slot1 {
        transform: translateX(0);
    }
    .containerAreaBar.three40.slot1 {
        transform: translateX(0);
    }
    .containerAreaBar.four.slot2  {
        transform: translateX(100%);
    }
    .containerAreaBar.three.slot2   {
        transform: translateX(100%);
    }
    .containerAreaBar.three.slot3 {
        transform: translateX(200%);
    }
    .containerAreaBar.four {
        width: 25%;
    }
    .containerAreaBar.four.slot1 .containerAreaBar.four40.slot1 {
        transform: translateX(0);
    }
    .containerAreaBar.four.slot2 {
        transform: translateX(100%);
    }
    .containerAreaBar.four40.slot2 {
        transform: translateX(50%);
    }
    .containerAreaBar.four40.slot3 {
        transform: translateX(100%);
    }
    .containerAreaBar.four40.slot4 {
        transform: translateX(100%);
    }
    .containerAreaBar.four.slot3 {
        transform: translateX(200%);
    }
    .containerAreaBar.four.slot4 {
        transform: translateX(300%);
    }

    .leftBar {
        width: 8px;
        height: 100%;
        border-radius: 2px 0 0;
        background-color: var(--color-gray-dark);
    }

    .leftBar.selected {
        background-color: var(--color-info);
    }

    .containerText {
        padding: 6px 0 0 14px;
        line-height: 21px;
        font-size: 20px;
        color: var(--color-dark);
    }
</style>