<template>
    <div
        v-if="jobs!== null && isVisible"
        class="top-left-section-truck-jobs"
    >
        <div class="title">
            {{ labels.targetContainerTitle }}
        </div>
        <div class="truck-jobs">
            <JobItemVariform
                v-for="(job, index) in jobs"
                :key="index"
                :containerName="job.equipmentId"
                :formWidgets="jobListFormWidgets"
                :jobData="job.getJobDataObject()"
                :jobDataLocalizedLabels="jobItemLabels"
                :isDeliveryEmpty="job.isSwappableDelivery"
                :isGateOutJob="job.isGateOutJob()"
                :isPriorityFetch="job.isPriorityFetch"
                :isTruckWithinProximity="job.isTruckWithinProximity()"
                :isTwinJob="job.isTwinJob()"
                :isTbdJob="job.isTbdJob()"
                :leftStripColor="getLeftStripColor(index)"
                :showTruckProximity="false"
                @click.native="isClickable && clickContainer(index)"
            />
        </div>
    </div>
</template>

<script>
/* eslint-disable no-unused-vars */
import {FormWidget} from '@navis-npm/tos-models-js/src/aggregates/variform/FormWidget';
/* eslint-enable no-unused-vars */
import {SectionPresenter} from '../../../presenters/SectionPresenter';
import Localizations from '../../../utils/Localizations';
import JobItemVariform from '@navis-npm/tos-storybook/src/components/jobitem/JobItemVariform';
import FallbackJobListTileVariformModel from '../../../utils/FallbackJobListTileVariformModel';

export default {
    name: 'TopLeftSectionTruckJobs',
    components: {
        JobItemVariform,
    },
    props: {
        topSectionPresenter: {
            type: SectionPresenter,
            required: true
        },
        selectJob: {
            type: Function,
            required: true,
        },
    },
    /**
     * Data section of this UI component
     * @return {Object}
     */
    data: function() {
        return {
            selectedJob: null,
            labels: Localizations.getTranslatedLabels('topSection'),
            jobItemLabels: Localizations.getTranslatedLabels('jobItem'),
            jobs: null,
            isVisible: true,
            selectedIndex: -1,
            isClickable: false,
            jobListFormWidgets: FallbackJobListTileVariformModel.formWidgets
        };
    },
    methods: {
        /**
         * Set the truck job view to be visible
         * @param {boolean} inVisible
         */
        setTruckJobsVisible(inVisible) {
            this.isVisible = inVisible;
        },
        /**
         * Set jobs
         * Also set button state to either complete to truck or stack
         * @param {Job[]} inJobs
         */
        setJobs(inJobs) {
            this.jobs = inJobs;
        },
        /**
         * Click a container from twin containers
         * @param {number} inIndex
         */
        clickContainer(inIndex) {
            if (this.jobs && this.jobs[inIndex]) {
                const job = this.jobs[inIndex];
                this.selectedIndex = inIndex;
                this.selectJob(this.topSectionPresenter, job);
            }
        },
        /**
         * Set whether the container should be clickable or not
         * @param {boolean} inIsClickable
         */
        setIsClickable(inIsClickable) {
            this.isClickable = inIsClickable;
        },
        /**
         * Notify set default selected job when receiving a truck form
         * @param {number} inJobIndex
         */
        notifySetDefaultSelectedJob (inJobIndex){
            this.selectedIndex = inJobIndex;
        },
        /**
         * Whether job is the selected job
         * @param {number} inIndex given job index
         * @return {boolean}
         */
        isSelectedJob(inIndex) {
            return this.selectedIndex === inIndex;
        },
        /**
         * Get left strip color of the given job index
         * @param {number} inIndex
         * @return {string|null}
         */
        getLeftStripColor(inIndex) {
            if (this.isSelectedJob(inIndex)) {
                return 'var(--color-info)';
            }
            return 'var(--color-container-border)';
        },
        /**
         * Set form widgets for the job list tile variform.
         * @param {Array.<Array.<FormWidget>>} inFormWidgets
         */
        setJobListTileFormWidgets(inFormWidgets) {
            // to ensure the job list tile is reset before setting the new form widgets
            this.jobListFormWidgets = null;
            this.jobListFormWidgets = inFormWidgets;
        }
    }
};
</script>

<style scoped>
    .title {
        font-size: 11px;
        margin-left: 8px;
        margin-top: 5px;
    }
    .truck-jobs {
        display: inline-flex;
        column-gap: 2px;
    }
    .top-left-section-truck-jobs {
        margin-left: 6px;
    }
</style>
