<template>
    <div
        v-if="isVisible"
        class="self-dispatch-screen"
    >
        <div class="top">
            <button
                class="button close-button"
                @click="setVisible(false)"
            >
                <AppIcon
                    name="close"
                    :width="26"
                />
            </button>
        </div>
        <div class="heading">
            {{ jobListLabels.title }}
        </div>
        <div class="job-list-container">
            <div class="job-list">
                <div
                    v-for="(job, index) in jobList"
                    :key="index"
                >
                    <JobItemVariform
                        :containerName="job.getContainerName(jobItemLabels)"
                        :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="job.getLeftStripColor(index, -1)"
                        :showTruckProximity="false"
                        @click.native="jobListClick(index)"
                    />
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import Localizations from '../../../utils/Localizations';
import JobItemVariform from '@navis-npm/tos-storybook/src/components/jobitem/JobItemVariform';
import AppIcon from '@navis-npm/tos-storybook/src/components/icons/AppIcon';
import FallbackJobListTileVariformModel from '../../../utils/FallbackJobListTileVariformModel';
import {OverlayPanelPresenter} from '../../../presenters/OverlayPanelPresenter';

export default {
    name: 'SelfDispatchScreen',
    components: {
        JobItemVariform,
        AppIcon
    },
    props: {
        presenter: {
            type:OverlayPanelPresenter,
            required: true
        },
        jobClick: {
            type: Function,
            required: true
        }
    },
    /**
     * Data section of this UI component
     * @return {Object}
     */
    data() {
        return {
            isVisible: false,
            jobList: [],
            jobListLabels: Localizations.getTranslatedLabels('overlayPanel')['jobList'],
            jobItemLabels: Localizations.getTranslatedLabels('jobItem'),
            jobListFormWidgets: FallbackJobListTileVariformModel.formWidgets
        };
    },
    methods: {
        /**
         * Function to set the visibility of Job List Screen Vue component
         * @param {boolean} inIsVisible
         */
        setVisible: function (inIsVisible) {
            this.isVisible = inIsVisible;
        },
        /**
         * Function to set the joblist
         * @param {Job[]} inJobList
         */
        setJobList(inJobList) {
            this.jobList = inJobList;
        },
        /**
         * Callback function called when Job is clicked
         * @param {number} inIndex
         */
        jobListClick(inIndex) {
            this.isVisible = false;
            this.jobClick(this.presenter, this.jobList[inIndex]);
        },
        /**
         * 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>
    .self-dispatch-screen {
      position: absolute;
      z-index: 99;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background-color: var(--color-secondary-70);
      overflow: hidden;
      color: white;
      padding-bottom: 0;
    }
    .top {
      position: fixed;
      top: 0;
      width: 100%;
      height: 75px;
    }
    .close-button {
      float: right;
      width: 75px;
      height: 100%;
      border: none;
      background-color: transparent;
      filter: invert(100%);
    }
    .heading {
      font-size: 28px;
      text-align: center;
      padding-top: 180px;
    }
    .job-list-container {
      margin-top: 50px;
      width: 100%;
      height: 75%;
      display: flex;
      flex-direction: row;
      justify-content: center;
    }
    .job-list {
      overflow-y: scroll;
      height: 100%;
      width: 80%;
    }
    ::-webkit-scrollbar {
      width: 0; /* Hide scrollbar */
    }
</style>