<template>
    <div
        id="rehandlesArea"
        :class="theme"
    >
        <table>
            <tr
                v-for="(rehandle, index) in rehandles"
                :key="index"
            >
                <CardItem
                    style="margin-left: 8px"
                    icon="restow"
                    :leftStripColor="index === 0 ? 'var(--color-warning)' : 'var(--color-container-border)'"
                >
                    <template
                        #contentWithFormat
                    >
                        <span class="containerNumber">{{ extractUnitPrefix(rehandle.equipmentId) }}<!--
                          --><span class="suffix">{{ extractUnitSuffix(rehandle.equipmentId) }}</span>
                        </span>
                    </template>
                </CardItem>
            </tr>
        </table>
    </div>
</template>

<script>
import {MiddleSectionPresenter} from '../../../presenters/MiddleSectionPresenter';
import CardItem from '@navis-npm/tos-storybook/src/components/cards/CardItem';
import {extractUnitPrefix, extractUnitSuffix} from '../../../utils/Utils';
export default {
    name: 'Rehandles',
    components: {
        CardItem,
    },
    props: {
        middleSectionPresenter: {
            type: MiddleSectionPresenter,
            required: false,
            default: null
        }
    },
    /**
     * Data section of this UI component
     * @return {Object}
     */
    data: function() {
        return {
            rehandles: [],
            theme: 'theme-light',
            extractUnitPrefix: extractUnitPrefix,
            extractUnitSuffix: extractUnitSuffix,
            
        };
    },
    methods: {
        /**
         * Setter for Rehandle List
         * @param {Job[]} inRehandleList
         */
        setRehandleList(inRehandleList) {
            this.rehandles = inRehandleList;
        },
        /**
         * Function to toggle theme between light/dark mode
         */
        toggleTheme(){
            this.theme= this.theme=== 'theme-light' ? 'theme-dark' : 'theme-light';
        }
    }
};
</script>

<style scoped>
    #rehandlesArea {
        width: 370px;
        position: fixed;
        padding-top: 10px;
        z-index: 1;
    }
    .containerNumber {
      font-size: 32px;
      font-weight: 100;
    }
    .containerNumber > .suffix {
      font-weight: 900;
    }
</style>