<template>
    <div class="slotArea">
        <div
            class="slotAreaBar"
            :class="containerSizeAndPosition"
            @click="slotClick.apply(presenter, [presenter, position.id])"
        >
            <span class="slotText">{{ position.id }}</span>
        </div>
    </div>
</template>

<script>

import {Job} from '../../../aggregates/Job';
import {MiddleSectionPresenter} from '../../../presenters/MiddleSectionPresenter';
import {PositionRail} from '../../../aggregates/PositionRail';

export default {
    name: 'RailSlot',
    props: {
        presenter: {
            type: MiddleSectionPresenter,
            required: true
        },
        position: {
            type: PositionRail,
            required: true
        },
        isSelected: {
            type: Boolean,
            required: true
        },
        max20s: {
            type: Number,
            required: true
        },
        slotClick: {
            type: Function,
            required: false,
            default: () => {}
        }
    },
    computed: {
        /**
         * Getter for Container Size and Position
         * @returns {Object}
         */
        containerSizeAndPosition: function() {
            const slotPosition = this.getSlotPosition();
            const numberOf20s = this.max20s;
            const isContainer40 = this.isContainer40();
            return {
                selected: this.isSelected,
                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(){
            return Job.isLargeEquipmentLength(this.position._equipmentLength);
        },
        /**
         * Getter for slot position
         * @returns {string}
         */
        getSlotPosition() {
            if (this.position == null) {
                return '';
            }
            const positionEnd =  this.position.id[this.position.id.length - 1];
            return positionEnd;
        }
    }
};
</script>

<style scoped>
    .slotArea {
        width: 100%;
        height: 100%;
        z-index: 15;
    }

    .slotAreaBar {
        width: calc(50% - 4px);
        height: calc(100% - 4px);

        background-color: var(--color-white);
        border-style: dashed;
        border-width: 2px;
        border-color: var(--color-gray-mid);
        z-index: 15;
        position: absolute;
    }

    .slotAreaBar.one {
        width: calc(100% - 4px);
    }
    .slotAreaBar.two40 {
        width: calc(100% - 4px);
    }
    .slotAreaBar.two .slotAreaBar.four40 {
        width: calc(50% - 4px);
    }
    .slotAreaBar.two.slot1 .slotAreaBar.two40.slot1 {
        transform: translateX(0);
    }
    .slotAreaBar.two.slot2 {
        transform: translateX(100%);
    }
    .slotAreaBar.three {
        width: calc(33.3% - 4px);
    }
    .slotAreaBar.three40 {
        width: calc(66.6% - 4px);
    }
    .slotAreaBar.three.slot1 .slotAreaBar.three40.slot1 {
        transform: translateX(0);
    }
    .slotAreaBar.four.slot2 .slotAreaBar.three.slot2   {
        transform: translateX(100%);
    }
    .slotAreaBar.three.slot3 {
        transform: translateX(200%);
    }
    .slotAreaBar.four {
        width: calc(25% - 4px);
    }
    .slotAreaBar.four.slot1 .slotAreaBar.four40.slot1 {
        transform: translateX(0);
    }
    .slotAreaBar.four.slot2 {
        transform: translateX(100%);
    }
    .slotAreaBar.four40.slot2 {
        transform: translateX(50%);
    }
    .slotAreaBar.four40.slot3 .slotAreaBar.four40.slot4 {
        transform: translateX(100%);
    }
    .slotAreaBar.four.slot3 {
        transform: translateX(200%);
    }
    .slotAreaBar.four.slot4 {
        transform: translateX(300%);
    }
    .slotAreaBar.selected {
        border-color: var(--color-info);
    }

    .slotText {
        padding: 3px 0 0 7px;
        font-size: 13px;
        color: var(--color-gray-mid);
    }
</style>