<template>
    <div
        v-if="visible"
        id="statusBar"
        :class="theme"
    >
        <div
            class="left"
        >
            <div
                v-if="homeButtonVisible"
                class="button"
                @click="homeButtonClick.apply(presenter, [presenter])"
            >
                <img
                    src="/resources/static/images/Back.svg"
                    alt="back-home-button"
                >
            </div>
            <div
                v-else-if="isSelfDispatchEnabled && isSearchAccessible && isExperimentalFeatureVisible"
                class="search-container"
            >
                <div
                    v-if="isSearchButtonVisible"
                    class="button"
                    @click="setSearchButtonVisible(false)"
                >
                    <AppIcon name="magnifier"/>
                </div>
                <div
                    v-else
                    class="search-input-box"
                >
                    <InputBasic
                        id="searchInput"
                        :placeholder="labels.searchInputPlaceholder"
                        iconName="magnifier"
                        :fieldErrorMsg="searchInputErrorMsg"
                        :transmitValueOnEnter="true"
                        @onEnterPressed="processSearchInput"
                        @onIconClick="processSearchInput"
                        @onValueClear="clearInputErrorMsg"
                    />
                    <div
                        class="button close-search-button"
                        @click="setSearchButtonVisible(true)"
                    >
                        <AppIcon name="close"/>
                    </div>
                </div>
            </div>
        </div>
        <div class="center">
            <span
                v-if="state === 'load'"
                class="status"
            ></span>
            <span
                v-else-if="state === 'select'"
                class="status"
            >{{ labels.selectJobTitle }}</span>
            <span
                v-else-if="state === 'housekeeping'"
                class="status"
            >{{ labels.housekeepingTitle }}</span>
            <span
                v-else-if="state === 'unavailable'"
                class="status"
            ></span>
            <span
                v-else-if="state === 'completeTo'"
                class="status"
            >{{ labels.completeToTitle }}</span>
            <span
                v-else-if="state === 'rehandle'"
                class="status"
            >{{ labels.rehandleTitle }}</span>
            <span
                v-else-if="state === 'status'"
                class="status"
            >{{ status }}</span>
            <span
                v-else-if="state === 'newCompleteTo'"
                class="status"
            >{{ labels.chooseNewCompleteToTitle }}</span>
            <span
                v-else-if="state === 'laneChange'"
                class="status"
            >{{ laneChangeStatus }}</span>
            <span
                v-else-if="state === 'emptySwap'"
                class="status"
            >{{ labels.emptySwapTitle }}</span>
            <span
                v-else-if="state === 'trailerSelection'"
                class="status"
            >{{ labels.trailerSelection }}</span>
            <span
                v-else-if="state === 'truckIdle'"
                class="status"
            >{{ labels.truckIdle }}</span>
            <span
                v-else-if="state === 'noJobs'"
                class="status"
            >{{ labels.noJobs }}</span>
            <span
                v-else-if="state === 'selectDestination'"
                class="status"
            >{{ labels.selectDestination }}</span>
        </div>
        <div class="right">
            <div
                v-if="scrollButtonsVisible"
                class="btn-area scroll"
            >
                <button
                    class="button tertiary scroll-up"
                    :disabled="!scrollUpEnabled"
                    @click="scrollUpEnabled ? scrollButtonClick.apply(presenter, [presenter, 'up']) : ''"
                >
                    <img
                        src="/resources/static/images/Back.svg"
                        alt="scroll up"
                    >
                </button>
                <button
                    class="button tertiary more-jobs"
                    :disabled="!scrollDownEnabled"
                    @click="scrollDownEnabled ? scrollButtonClick.apply(presenter, [presenter, 'down']) : ''"
                >
                    {{ labels.moreJobsButtonLabel }}
                </button>
            </div>
        </div>
    </div>
</template>

<script>
import Localizations from '../../../utils/Localizations';
import {StatusBarPresenter} from '../../../presenters/StatusBarPresenter';
import InputBasic from '@navis-npm/tos-storybook/src/components/input/InputBasic';
import AppIcon from '@navis-npm/tos-storybook/src/components/icons/AppIcon';
import GlobalState from '../../../state/GlobalState';

export default {
    name: 'StatusBar',
    components: {
        InputBasic,
        AppIcon
    },
    props: {
        presenter: {
            type: StatusBarPresenter,
            required: true
        },
        homeButtonClick: {
            type: Function,
            required: true
        },
        scrollButtonClick: {
            type: Function,
            required: true
        },
        searchButtonClick: {
            type: Function,
            required: true
        }
    },
    /**
     * Data of VueJS Component
     * @returns {Object}
     */
    data() {
        return {
            visible: false,
            state: 'load', // [load, select, unavailable, completeTo, rehandle, status, newCompleteTo, laneChange,
            //  trailerSelection, truckIdle, housekeeping]
            status: '', // containerNum or instruction
            homeButtonVisible: false,
            isSearchButtonVisible: false,
            isSearchAccessible: false,
            searchInputErrorMsg: '',
            scrollButtonsVisible: false,
            scrollUpEnabled: true,
            scrollDownEnabled: true,
            labels: Localizations.getTranslatedLabels('statusBar'),
            theme: 'theme-light',
            laneChangeStatus: '',
            powName: '',
            minCharsToSearch: 3
        };
    },
    computed: {
        isSelfDispatchEnabled: () =>  GlobalState.isSelfDispatchEnabled() && !GlobalState.isOnePage()
            && !GlobalState.isCheTypeTruck() && !GlobalState.isInDispatchMode(),
        isExperimentalFeatureVisible: () => GlobalState.isExperimentalFeatureVisible()
    },
    methods: {
        /**
         * Set visibility of status bar
         * @param {boolean} isVisible
         */
        setVisible: function(isVisible) {
            this.visible = isVisible;
        },
        /**
         * Set state of status bar
         * - load, select, unavailable, completeTo, rehandle, status, newCompleteTo, emptySwap,
         * - trailerSelection, truckIdle, housekeeping
         * @param {string} inState
         */
        updateState: function(inState) {
            this.state = inState;
        },
        /**
         * Update the pow name
         * @param {string} inPowName
         */
        updatePowName: function(inPowName) {
            this.powName = inPowName;
        },
        /**
         * Get the pow name information to be displayed
         * @return {string}
         */
        getPowNameInfo : function(){
            return (this.powName !== '') ? ('POW : ' + this.powName + ' | ') : '';
        },
        /**
         * Update status for when state === status
         * This status has full string for Lift AND Place
         * @param {string} inContainer
         * @param {string} inPositionFrom
         * @param {string} inPositionTo
         */
        updateStatus: function(inContainer, inPositionFrom, inPositionTo) {
            this.status = this.getPowNameInfo() + this._capitalizeFirstLetter(this.labels.lift) + ' ' + inContainer + ' ' + this.labels.from +
                ' ' + inPositionFrom +
                ' ' + this.labels.and + ' ' + this.labels.place + ' ' + this.labels.at + ' ' + inPositionTo;
        },
        /**
         * Update the status for Truck Drive to Yard Origin
         * @param {string} inBlockName
         * @param {string} inRowLabel
         */
        updateTruckDriveToOriginStatus: function(inBlockName, inRowLabel) {
            this.status = this.getPowNameInfo() + this._capitalizeFirstLetter(this.labels.driveToBlock) + ' ' + inBlockName + ' ' +
                this.labels.row + ' ' + inRowLabel;
        },
        /**
         * Update status for Truck Drive to any origin (generic message for non-yard positions)
         * @param {string} inPositionId
         */
        updateTruckDriveToOriginStatusAny: function(inPositionId) {
            this.status = this.getPowNameInfo() + this._capitalizeFirstLetter(this.labels.driveToBlock) + ' ' + inPositionId;
        },

        /**
         * Update status for Truck Drive to Crane origin
         * @param {string} inCraneName
         */
        updateTruckDriveToOriginStatusCrane: function(inCraneName) {
            this.status = this.getPowNameInfo() + this._capitalizeFirstLetter(this.labels.driveToTitle) + ' ' +
                this._capitalizeFirstLetter(this.labels.crane) + ' ' + inCraneName;
        },
        /**
         * Update the status for Truck wait at yard origin
         * @param {string} inBlockName
         * @param {string} inRowLabel
         */
        updateTruckWaitAtOriginStatus: function(inBlockName, inRowLabel) {
            this.status = this.getPowNameInfo() + this._capitalizeFirstLetter(this.labels.wait) + ' ' +
                this.labels.at + ' ' + inBlockName + ' ' + this.labels.row + ' ' + inRowLabel;
        },
        /**
         * Update the status for Truck wait at any origin (generic message for non-yard positions)
         * @param {string} inPositionId
         */
        updateTruckWaitAtOriginStatusAny: function(inPositionId) {
            this.status = this.getPowNameInfo() + this._capitalizeFirstLetter(this.labels.wait) + ' ' + this.labels.at + ' ' + inPositionId;
        },
        /**
         * Update the status for Truck wait at any origin for twin containers (generic message for non-yard positions)
         * @param {string} inPositionId
         */
        updateTruckWaitAtOriginStatusTwinAny: function(inPositionId) {
            this.status = this.getPowNameInfo() + this._capitalizeFirstLetter(this.labels.wait) + ' '
                + this._capitalizeFirstLetter(this.labels.twin) + ' '
                + this.labels.at + ' ' + inPositionId;
        },
        /**
         * Update the state for truck laden to yard destination
         * @param {string} inContainerId
         * @param {string} inDestBlockName
         * @param {string} inDestRowLabel
         */
        updateTruckLadenToDestStatusYard: function(inContainerId, inDestBlockName, inDestRowLabel) {
            this.status = this.getPowNameInfo() + this._capitalizeFirstLetter(this.labels.carry) + ' ' + inContainerId + ' '
                + this.labels.to  + ' ' + inDestBlockName + ' ' + this.labels.row + ' ' + inDestRowLabel;
        },
        /**
         * Update the state for truck laden to any destination (generic message for non-yard positions)
         * @param {string} inContainerId
         * @param {string} inDestPositionId
         */
        updateTruckLadenToDestStatusAny: function(inContainerId, inDestPositionId) {
            this.status = this.getPowNameInfo() + this._capitalizeFirstLetter(this.labels.carry) + ' ' + inContainerId + ' '
                + this.labels.to + ' ' + inDestPositionId;
        },
        /**
         * Update the state for truck laden to destination for twin containers in vessel load move.
         * Assumes dest position for both is the same QC. Display both container IDs.
         * @param {string} inContainerId1
         * @param {string} inContainerId2
         * @param {string} inDestPositionId
         */
        updateTruckLadenToDestTwinQc: function(inContainerId1, inContainerId2, inDestPositionId) {
            this.status = this.getPowNameInfo() +  this._capitalizeFirstLetter(this.labels.carry) + ' ' + inContainerId1 + ' and '
                + inContainerId2 + ' ' + this.labels.to + ' ' + this._capitalizeFirstLetter(this.labels.crane) + ' '
                + inDestPositionId;
        },
        /**
         * Update the state for truck laden to destination for twin containers when they have yard destinations
         * with the same block and row. Display both container IDs.
         * @param {string} inContainerId1
         * @param {string} inContainerId2
         * @param {string} inDestBlockName
         * @param {string} inDestRowLabel
         */
        updateTruckLadenToDestTwinYard: function(inContainerId1, inContainerId2, inDestBlockName, inDestRowLabel) {
            this.status = this.getPowNameInfo() + this._capitalizeFirstLetter(this.labels.carry) + ' ' + inContainerId1 + ' and '
                + inContainerId2 + ' ' + this.labels.to + ' ' + inDestBlockName + ' ' + this.labels.row + ' '
                + inDestRowLabel;
        },
        /**
         * Update the state for truck laden at dest
         * @param {string} inContainerId
         */
        updateTruckLadenAtDest: function(inContainerId) {
            this.status = this.getPowNameInfo() + this._capitalizeFirstLetter(this.labels.waitFor) + ' ' + inContainerId + ' '
                + this.labels.toBeLifted;
        },
        /**
         * Update status for when state === laneChange
         * @param {string} inDestinationBlockName
         */
        updateLaneChangeStatus: function(inDestinationBlockName) {
            this.laneChangeStatus = this.labels.driveToTitle + ' ' + inDestinationBlockName;
        },
        /**
         * Update status for when state === status
         * This status is just the first portion of the status. It only includes the Lift string
         * @param {string} inContainer
         * @param {string} inPositionFrom
         */
        updateStatusLift: function(inContainer, inPositionFrom) {
            this.status = this.getPowNameInfo() + this._capitalizeFirstLetter(this.labels.lift) + ' ' + inContainer + ' ' +
                this.labels.from + ' ' + inPositionFrom;
        },
        /**
         * Update status for when state === status
         * This status is just the 2nd portion of the status. It only includes the place string
         * @param {string} inContainer
         * @param {string} inPositionTo
         */
        updateStatusPlace: function(inContainer, inPositionTo) {
            this.status = this.getPowNameInfo() + this._capitalizeFirstLetter(this.labels.place) + ' ' + inContainer + ' ' +
                this.labels.at + ' ' + inPositionTo;
        },
        /**
         * Toggle home button visibility (back button arrow on bottom left)
         * @param {boolean} inVisible
         */
        toggleHomeButton: function(inVisible) {
            this.homeButtonVisible = inVisible;
        },
        /**
         * Toggle scroll button visibility (back arrow and "More jobs" buttons on bottom right)
         * @param {boolean} inVisible
         */
        toggleScrollButtons: function(inVisible) {
            this.scrollButtonsVisible = inVisible;
        },
        /**
         * Enable or disable a scroll button in job list
         * @param {string} inDirection scroll direction ('up' / 'down')
         * @param {boolean} inEnable true if enable, false if disable
         */
        toggleScrollButtonAccess: function(inDirection, inEnable) {
            if (inDirection === 'up') {
                this.scrollUpEnabled = inEnable;

            } else if (inDirection === 'down') {
                this.scrollDownEnabled = inEnable;

            } else {
                console.error('Invalid scroll direction, access not modified.');
            }
        },
        /**
         * Toggle theme light & dark
         */
        toggleTheme: function() {
            this.theme = this.theme === 'theme-light'? 'theme-dark': 'theme-light';
        },
        /**
         * Capitalize first letter of string
         * @param {String} inString
         * @returns {string}
         * @private
         */
        _capitalizeFirstLetter: function(inString) {
            return inString.charAt(0).toUpperCase() + inString.slice(1);
        },
        /**
         * Toggle access to the search button, only enabled in the home screen
         * @param {boolean} inIsEnabled
         */
        toggleSearchButtonAccess: function (inIsEnabled) {
            this.isSearchAccessible = inIsEnabled;
            // reset the search button when enable/disable search jobs function
            this.setSearchButtonVisible(true);
            this.clearInputErrorMsg();
        },
        /**
         * Set whether search button is visible or not
         * @param {boolean} inIsVisible
         */
        setSearchButtonVisible: function (inIsVisible) {
            this.isSearchButtonVisible = inIsVisible;
        },
        /**
         * Process input value from the search box
         * @param {string} inInputValue
         */
        processSearchInput: function (inInputValue) {
            const searchValue = inInputValue.trim();
            if (searchValue.length < this.minCharsToSearch) {
                this.searchInputErrorMsg = this.labels.searchInputErrorMsg;
            } else {
                this.clearInputErrorMsg();
                this.searchButtonClick(this.presenter, searchValue);
            }
        },
        /**
         * Clear input error message
         */
        clearInputErrorMsg() {
            this.searchInputErrorMsg = '';
        }
    }
};
</script>

<style scoped>
    .left {
        position: absolute;
        left: 0;
    }
    .left .button {
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      filter: var(--filter-icon);
      cursor: pointer;
      width: 70px;
      font-size: 50px;
    }
    .center {
        width: auto;
        margin-top: auto;
        margin-bottom: auto;
    }
    .status {
        color: var(--color-statusbar-items);
        font-size: 20px;
        font-weight: bold;
    }
    .right {
        position: absolute;
        right: 0;
    }
    .btn-area {
        display: flex;
        flex-direction: row;
        align-items: center;
    }
    .right .btn-area > * {
        margin-right: 16px;
    }
    @-webkit-keyframes btn-slide-in-hide {
        100% { margin-right: -50px; }
    }
    @keyframes btn-slide-in-hide {
        100% { margin-right: -50px; }
    }
    @-webkit-keyframes btn-slide-out-show {
        0% { margin-right: -50px }
        100% { margin-right: 16px; }
    }
    @keyframes btn-slide-out-show {
        0% { margin-right: -50px }
        100% { margin-right: 16px; }
    }
    .button.tertiary.scroll-up {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        border-radius: 50%;
        width: 48px;
        padding: 0;

        -webkit-animation: btn-slide-out-show 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
        animation: btn-slide-out-show 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    }
    .button.tertiary.scroll-up img {
        width: 15px;
        height: 15px;
    }
    .button.tertiary.scroll-up:disabled {
        -webkit-animation: btn-slide-in-hide 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
        animation: btn-slide-in-hide 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    }
    .button.tertiary.scroll-up:disabled img {
        display: none;
    }
    .search-input-box {
        display: flex;
        flex-direction: row;
        width:350px;
        margin-left: 20px;
        justify-content: center;
        align-items: flex-start;
        cursor: pointer;
    }
    .close-search-button {
        padding-top: 5px;
    }
</style>