<template>
    <div class="selected-container">
        <div
            v-if="isVisible"
            class="container"
        >
            <div class="title">
                {{ labels.selectedContainerTitle }}
            </div>
            <div class="container-info">
                <Container
                    v-if="container != null"
                    variant="extended"
                    :statusColor="getStatusColor"
                    :mainAttrBlock="{key: 'Container', value: container.equipmentId, format: 'containerId'}"
                    :subAttrBlock1="{key: 'Weight', value: container.grossWeight}"
                    :subAttrBlock2="{key: 'ISO', value: container.archType}"
                    :iconsBlock="getIcons"
                    :iconsNum="iconsNum"
                />
            </div>
        </div>
    </div>
</template>

<script>
import Localizations from '../../../utils/Localizations';
import Container from '@navis-npm/tos-storybook/src/components/container/Container';
import {IconUtil} from '@navis-npm/tos-ui-js/src/utils/IconUtil';
import {ColorConstants} from '@navis-npm/tos-ui-js/src/utils/ColorConstants';

export default {
    name: 'SelectedContainer',
    components: {
        Container
    },
    props: {
        // the maximum number of icons that the container can display
        iconsNum: {
            type: Number,
            required: false,
            default: 6
        }
    },
    /**
     * Data section of this UI component
     * @return {Object}
     */
    data: function() {
        return {
            labels: Localizations.getTranslatedLabels('topSection'),
            isVisible: false,
            container: null
        };
    },
    computed: {
        /**
         * Get icons
         * @returns {Array.<string>}
         */
        getIcons() {
            const iconInfo = IconUtil.getIconInfo(this.container);
            return iconInfo.filter(icon => icon.isVisible).slice(0, this.iconsNum)
                .map(icon => icon.name);
        },
        /**
         * Get status color
         * @returns {string}
         */
        getStatusColor() {
            return ColorConstants.COLOR_SELECTED;
        }
    },
    methods: {
        /**
         * Set this container visible
         * @param {boolean} inVisible
         */
        setVisible(inVisible) {
            this.isVisible = inVisible;
        },
        /**
         * Set container for top section left side
         * @param {YardContainerViewModel | null} inContainerViewModel
         */
        setContainer(inContainerViewModel) {
            this.container = inContainerViewModel;
        }
    }
};
</script>

<style scoped>
    .title {
      font-size: 15px;
      margin-left: 8px;
      margin-top: 5px;
    }
    .selected-container {
      margin-left: 6px;
    }
    .container-info {
      width: 415px;
    }
</style>