<template>
    <div class="selected-job">
        <div
            v-if="(job !== null) && (isVisible)"
            class="container jobView"
        >
            <div class="title">
                {{ labels.targetContainerTitle }}
            </div>
            <div class="contain-info">
                <div class="job-container">
                    <JobItemVariform
                        style="flex-grow: 1"
                        :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.isRehandleJob() ? 'var(--color-warning)' : 'var(--color-info)'"
                        :showTruckProximity="false"
                        :numDisplayedProperties="3"
                    />
                </div>

                <div class="action-buttons">
                    <div>
                        <div>
                            <button
                                class="button tertiary"
                                :class="{active: isCompleteToDisabled ? '' : completeToHover}"
                                :disabled="isCompleteToDisabled"
                                @click="completeToClick"
                            >
                                {{ getCompleteToLabel }}
                            </button>
                        </div>
                        <button
                            class="button tertiary"
                            style="margin-top: 3px"
                            :class="{active: isRehandleDisabled ? '' : rehandleHover}"
                            :disabled="isRehandleDisabled"
                            @click="rehandleClick"
                        >
                            {{ labels.rehandleButtonLabel }}
                        </button>
                    </div>
                    <div>
                        <div v-if="job.isSwappableDelivery">
                            <button
                                class="button tertiary"
                                :disabled="isEmptySwapDisabled"
                                @click="emptySwapClick"
                            >
                                {{ labels.emptySwapButtonLabel }}
                            </button>
                        </div>
                        <div v-if="isVisibleBackToTruck">
                            <button
                                class="button tertiary"
                                style="margin-top: 3px"
                                @click="backToTruckButtonClick"
                            >
                                {{ labels.backToTruckButtonLabel }}
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div v-if="isLaneChangeView">
            <lane-change-item
                :presenter="topSectionPresenter"
                :laneChangePlan="laneChangePlan"
                :cheLastKnownPos="cheLastKnownPos"
                :theme="theme"
                :state="'single'"
            >
            </lane-change-item>
        </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 Localizations from '../../../utils/Localizations';
import LaneChangeItem from '../LaneChangeItem';
import {TopSectionPresenter} from '../../../presenters/TopSectionPresenter';
import {PositionRail} from '../../../aggregates/PositionRail';
import JobItemVariform from '@navis-npm/tos-storybook/src/components/jobitem/JobItemVariform';
import FallbackJobListTileVariformModel from '../../../utils/FallbackJobListTileVariformModel';

export default {
    name: 'SelectedJob',
    components: {
        JobItemVariform,
        LaneChangeItem
    },
    props: {
        topSectionPresenter: {
            type: TopSectionPresenter,
            required: true
        },
        showCompleteToTruckClick: {
            type: Function,
            required: false,
            default: () => {}
        },
        showCompleteToStackClick: {
            type: Function,
            required: false,
            default: () => {}
        },
        showRehandleClick: {
            type: Function,
            required: false,
            default: () => {}
        },
        showEmptySwapClick: {
            type: Function,
            required: false,
            default: () => {}
        },
        backToTruckClick: {
            type: Function,
            required: false,
            default: () => {}
        }
    },
    /**
     * Data section of this UI component
     * @return {Object}
     */
    data: function() {
        return {
            labels: Localizations.getTranslatedLabels('topSection'),
            jobItemLabels: Localizations.getTranslatedLabels('jobItem'),
            isVisible: false,
            job: null,
            rehandleHover: false,
            completeToHover: false,
            isCompleteToDisabled: false,
            isRehandleDisabled: false,
            isEmptySwapDisabled: false,
            theme: 'theme-light',
            buttonState: 'completeToStack',
            laneChangePlan: {},
            cheLastKnownPos: '',
            isLaneChangeView: false,
            isVisibleBackToTruck: false,
            isOperationStatusHousekeeping: false,
            jobListFormWidgets: FallbackJobListTileVariformModel.formWidgets
        };
    },
    computed: {
        /**
         * Get complete to label
         * @return {string}
         */
        getCompleteToLabel() {
            if (this.buttonState === 'completeToTruck') {
                return  this.labels.completeToTruckButtonLabel;
            } else if (this.buttonState === 'completeToStack') {
                return this.labels.completeToStackButtonLabel;
            } else {
                console.warn('Button state is invalid. ' + this.buttonState);
            }
            return '--';
        }
    },
    methods: {
        /**
         * Set this container visible
         * @param {boolean} inVisible
         */
        setVisible(inVisible) {
            this.isVisible = inVisible;
        },
        /**
         * Set the lane change view to be visible
         * @param {boolean} inVisible
         */
        setLaneChangeViewVisible(inVisible) {
            this.isLaneChangeView = inVisible;
        },
        /**
         * Set the lane change plan
         * @param {LaneChangePayload} inLaneChangePayload
         */
        setLaneChangePlan(inLaneChangePayload) {
            this.laneChangePlan = inLaneChangePayload.laneChangePlan;
            this.cheLastKnownPos = inLaneChangePayload.cheLastKnownPos;
        },
        /**
         * Update the Last Known Pos, if lane change is currently in progress
         * and che position update has been made
         * @param {string} inLastKnownPos
         */
        updateLastKnownPos(inLastKnownPos) {
            this.cheLastKnownPos = inLastKnownPos;
        },
        /**
         * Set T/F if complete to button is disabled
         * T -> Disable complete to button
         * F -> Enable complete to button
         * @param {boolean} inIsDisabled
         */
        setIsCompleteToDisabled(inIsDisabled) {
            this.isCompleteToDisabled = inIsDisabled;
        },
        /**
         * Set T/F if rehandle button is disabled
         * T -> Disable rehandle button
         * F -> Enable rehandle button
         * @param {boolean} inIsDisabled
         */
        setIsRehandleDisabled(inIsDisabled) {
            this.isRehandleDisabled = inIsDisabled;
        },
        /**
         * Set T/F if empty swap button is disabled
         * T -> Disable empty swap button
         * F -> Enable empty swap button
         * @param {boolean} inIsDisabled
         */
        setEmptySwapDisabled(inIsDisabled) {
            this.isEmptySwapDisabled = inIsDisabled;
        },
        /**
         * Set job for top section left side
         * Also set button state to either complete to truck or stack
         * @param {Job} inJob
         */
        setJob(inJob) {
            this.job = inJob;
            if (this.job.isToPositionYard || this.job.rehandleCount !== 0){
                this.buttonState = 'completeToStack';
            }
            else {
                // To Position is to truck or rail car
                this.buttonState = 'completeToTruck';
            }
        },
        /**
         * Set is back to truck button to be visible
         * @param {boolean} inIsVisible
         */
        setIsVisibleBackToTruckButton(inIsVisible) {
            this.isVisibleBackToTruck = inIsVisible;
        },
        /**
         * Rehandle click wrapper
         */
        rehandleClick() {
            this.showRehandleClick(this.topSectionPresenter);
        },
        /**
         * Complete to click, decide results of button click from props
         */
        completeToClick() {
            if (this.job.rehandleCount === 0 && this.job.toPosition instanceof PositionRail) {
                console.warn('Complete To Rail feature not supported yet');
            } else if (this.job.isToPositionTruckInternal && this.job.rehandleCount === 0) {
                this.showCompleteToTruckClick(this.topSectionPresenter);
            } else {
                this.showCompleteToStackClick(this.topSectionPresenter);
            }
        },
        /**
         * Call back function to be triggered when empty swap button is clicked
         */
        emptySwapClick() {
            // when click the empty swap button, disable completeTo and Rehandle button
            this.setIsCompleteToDisabled(true);
            this.setIsRehandleDisabled(true);
            this.showEmptySwapClick(this.topSectionPresenter);
        },
        /**
         * Call back function triggered for back to truck click
         */
        backToTruckButtonClick() {
            this.backToTruckClick(this.topSectionPresenter, this.job);
        },
        /**
         * Activate rehandle button
         * @param {boolean} inIsHover
         */
        setRehandleButton(inIsHover) {
            this.rehandleHover = inIsHover;
        },
        /**
         * Activate complete to button
         * @param {boolean} inIsHover
         */
        setCompleteToButton(inIsHover) {
            this.completeToHover = inIsHover;
        },
        /**
         * Toggle night theme
         */
        toggleTheme() {
            this.theme = this.theme === 'theme-light' ? 'theme-dark' : 'theme-light';
        },
        /**
         * Function to set whether application is in the housekeeping mode or not
         * @param {boolean} inIsOperationStatusHousekeeping
         */
        setOperationStatusIsHousekeeping(inIsOperationStatusHousekeeping) {
            this.isOperationStatusHousekeeping = inIsOperationStatusHousekeeping;
        },
        /**
         * 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;
    }
    .contain-info {
        display: flex;
        flex-flow: row;
        column-gap: 3px;
    }
    .selected-job {
        margin-left: 6px;
    }
    .job-container {
        width: 415px;
    }
    .action-buttons {
        display: flex;
        flex-flow: row;
        column-gap: 3px;
    }
</style>
