<template>
    <div
        v-if="visible"
        class="confirm-container"
    >
        <div class="heading">
            {{ labels.formTitle }}
        </div>
        <div class="content">
            <!-- Job List -->
            <div class="joblist-container">
                <div class="joblist-text">
                    <div
                        v-if="confirmContainerJobList.length > 0"
                    >
                        Select Containers
                    </div>
                    <div
                        v-else
                    >
                        {{ labels.jobListTitle }}
                    </div>
                </div>
                <div class="job-list">
                    <div
                        v-if="confirmContainerJobList.length > 0"
                        :key="key"
                    >
                        <div
                            v-for="(job, index) in confirmContainerJobList"
                            :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="confirmContainerJobListClick(index)"
                            />
                        </div>
                    </div>
                    <div
                        v-else
                        :key="key"
                    >
                        <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>

            <!-- Or label -->
            <div class="or-label">
                <span class="or-text">
                    -{{ labels.orLabel }}-
                </span>
            </div>

            <!-- Container number input -->
            <div class="input-div">
                <label> {{ labels.inputFieldTitle }}</label>
                <input
                    v-model="userInput"
                    type="text"
                    class="input-field"
                    :class="{'error-attribute' : errorMessage.length > 0}"
                />
                <div
                    v-if="errorMessage.length > 0"
                    class="error-large"
                >
                    {{ errorMessage }}
                </div>

                <button
                    class="ok-button"
                    @click="clickOkButton(presenter)"
                >
                    <img
                        class="icon-tick"
                        src="/resources/static/images/Tick.svg"
                        alt="Tick.svg"
                    >
                    OK
                </button>
            </div>
        </div>
        <button
            class="close-button"
            @click="cancelConfirmContainerForm(presenter)"
        >
            <img
                style="filter: invert(100%); width: 26px;"
                src="/resources/static/images/Close.svg"
                alt="close.svg"
            >
        </button>
    </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 Localizations from '../../../utils/Localizations';
import JobItemVariform from '@navis-npm/tos-storybook/src/components/jobitem/JobItemVariform';
import {OverlayPanelPresenter} from '../../../presenters/OverlayPanelPresenter';
import FallbackJobListTileVariformModel from '../../../utils/FallbackJobListTileVariformModel';

export default {
    name: 'ConfirmContainerForm',
    components: {
        JobItemVariform
    },
    props: {
        presenter: {
            type:OverlayPanelPresenter,
            required: true
        },
        jobClick: {
            type: Function,
            required: true
        },
        cancelButtonClick: {
            type: Function,
            required: false,
            default: () => {}
        },
        okButtonClick: {
            type: Function,
            required: false,
            default: () => {}
        }
    },
    /**
     * Data section of this UI component
     * @return {Object}
     */
    data() {
        return {
            visible: false,
            state: 'full',
            jobList:[],
            confirmContainerJobList:[],
            selectedIndex: -1,
            key: 0,
            userInput: '',
            errorMessage: '',
            labels: Localizations.getTranslatedLabels('overlayPanel')['confirmContainerForm'],
            jobItemLabels: Localizations.getTranslatedLabels('jobItem'),
            jobListFormWidgets: FallbackJobListTileVariformModel.formWidgets
        };
    },
    methods: {
        /**
         * Function to set the visibility of Confirm Container Vue component
         * @param {boolean} inVisible
         */
        setVisible: function (inVisible) {
            this.visible = inVisible;
        },
        /**
         * Function to set the joblist
         * @param {Job[]} inJobList
         */
        setJobList(inJobList) {
            this.jobList = inJobList;
            this.selectedIndex = -1;
            this.key++;
            this.key %= 2;
        },
        /**
         * Function to set Confirm Container JobList
         * @param {Job[]} inConfirmContainerJobList
         */
        setConfirmContainerJobList(inConfirmContainerJobList) {
            this.confirmContainerJobList = inConfirmContainerJobList;
            this.selectedIndex = -1;
            this.key++;
            this.key %= 2;
        },
        /**
         * Function to set the error message coming from the ECN4
         * @param {string} inReason
         */
        setError(inReason) {
            this.errorMessage = inReason;
        },
        /**
         * Callback function called when Job is clicked
         * @param {number} inIndex
         */
        jobListClick(inIndex) {
            this.visible = false;
            this.selectedIndex = inIndex;
            this.jobClick(this.presenter, this.jobList[inIndex]);
        },
        /**
         * Callback function called when Confirm Container Job is clicked
         * @param {number} inIndex
         */
        confirmContainerJobListClick(inIndex) {
            this.visible = false;
            this.selectedIndex = inIndex;
            this.jobClick(this.presenter, this.confirmContainerJobList[inIndex]);
        },
        /**
         * Callback function called when cancel button is clicked
         */
        cancelConfirmContainerForm() {
            this.visible = false;
            this.cancelButtonClick(this.presenter);
        },
        /**
         * Callback function called when Ok button is clicked
         */
        clickOkButton() {
            //resetting the error message for new message from Ecn4
            this.errorMessage = '';
            this.okButtonClick(this.presenter, this.userInput);
        },
        /**
         * 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>
    .confirm-container {
        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;
    }
    .content {
        display: flex;
        padding-top: 5px;
        padding-right: 20px;
        width: 100%;
        height: 100%;
    }
    .heading {
        font-size: 24px;
        text-align: center;
        padding-top: 150px;
    }
    ::-webkit-scrollbar {
        width: 0px;  /* Remove scrollbar space */
        background: transparent;  /* Optional: just make scrollbar invisible */
    }
    .joblist-text {
      font-size: 15px;
      margin-left: 3%;
      margin-bottom: 3px;
    }
    .joblist-container {
      top: 180px;
      width: 50%;
      height: 75%;
      color: white;
      margin-left: 6px;
      display: flex;
      flex-direction: column;
    }
    .or-label {
        font-size: 30px;
        width: 100px;
        text-align: center;
    }
    .or-text {
        margin-top: 10%;
    }
    .input-div {
        width: 45%;
        text-align: right;
        padding-right: 6px;
    }
    label {
        float: left;
        margin-left: 5px;
        font-size: 15px;
    }

    .ok-button {
        background-color: var(--color-primary);
        margin-top: 100px;
        right: 4%;
        top: 37.5%;
        border: none;
    }
    .input-field {
        margin-top: 10px;
        width: 100%;
        height: 32px;
        border-radius: 4px;
        border: 1px solid var(--color-secondary);
        background-color: var(--color-white);
        display: block;
        position: relative;
        box-sizing: border-box;
    }
    .error-attribute {
      background-image: url("/resources/static/images/Error.svg");
      background-repeat: no-repeat;
      background-position: 98%;
      border: 2px solid var(--color-danger);
    }
    input[type="text"] {
        font-size: 20px;
    }
    .icon-tick {
        float: left;
        margin-left: 5px;
        margin-top: 5px;
    }
    .error-large {
        font-size: 16px;
        color: white;
        text-align: left;
        height: 18px;
        border-radius: 4px;
        border: 1px solid var(--color-danger);
        background-color: var(--color-danger);
        display: block;
        position: relative;
    }
    .close-button {
        float: right;
        width: 75px;
        border: none;
        background-color: transparent;
        position: fixed;
        right: 1.5%;
        bottom: 1.5%;
    }
    .job-list {
        overflow-y: scroll;
        height: 100%;
    }
</style>
