<template>
    <div
        v-if="visible"
        class="operationStatusScreen"
    >
        <div class="container">
            <div
                v-if="state === 'operationStatus'"
                class="title operation-status"
            >
                <h4>
                    {{ isOperationStatusWorking ?
                        labels.title.working : labels.title.unavailable }}
                </h4>
            </div>
            <div
                v-if="state === 'completeTo'"
                class="title input-panel center"
            >
                <h4>{{ labels.completeToTruckTitle }}</h4>
            </div>
            <div
                v-if="state === 'rehandle'"
                class="title input-panel center"
            >
                <h4>{{ labels.rehandleTitle }}</h4>
            </div>
            <div
                v-if="state === 'completeTo' || state === 'rehandle'"
                class="center"
            >
                <span
                    class="input-field"
                    :class="{error: this.error !== '', completeto: state === 'completeTo',
                             rehandle: state === 'rehandle'}"
                >
                    <img
                        v-if="state === 'completeTo'"
                        src="/resources/static/images/Truck.svg"
                    />
                    <img
                        v-if="state === 'rehandle'"
                        src="/resources/static/images/container.svg"
                    />
                    <input
                        v-model.trim="userInput"
                        type="text"
                        required
                    />
                </span>
                <div
                    v-if="error !== ''"
                    class="center error-large"
                >
                    {{ error }}&nbsp
                </div>
                <div
                    v-if="isShowLocSlotOnCarriage"
                    class="center"
                >
                    <button
                        class="button tertiary"
                        :class="{active: selectedSlot === '1'}"
                        style="height: 36px; width: 100px; margin: 2px 10px 0 0; "
                        @click="setSelectedSlotOne"
                    >
                        1
                    </button>
                    <button
                        class="button tertiary"
                        :class="{active: selectedSlot === '3'}"
                        style="height: 36px; width: 100px;"
                        @click="setSelectedSlotThree"
                    >
                        3
                    </button>
                </div>
                <br>

                <div class="center">
                    <button
                        class="button secondary"
                        style="float: left;"
                        @click="handleCancel"
                    >
                        {{ labels.cancelButtonLabel }}
                    </button>
                    <button
                        v-if="state === 'completeTo'"
                        class="button primary"
                        style="padding: 15px 30px; float: right"
                        :disabled="!(userInput && (isShowLocSlotOnCarriage ? (selectedSlot !== '') : true))"
                        @click="handleCompleteToTruck"
                    >
                        {{ labels.completeToTruckButtonLabel }}
                    </button>
                    <button
                        v-if="state === 'rehandle'"
                        class="button primary"
                        style="padding: 15px 30px; float: right"
                        :disabled="!userInput"
                        @click="userInput.length < 5 ? showLessThan5Msg() : rehandleClick.apply(presenter, [presenter, userInput])"
                    >
                        {{ labels.saveButtonLabel }}
                    </button>
                </div>
            </div>

            <div
                v-if="state === 'operationStatus'"
                class="center operation-status"
            >
                <div
                    v-if="!isOperationStatusWorking && cheType === 'RTG'"
                    class="full-width"
                >
                    <table class="full-width">
                        <tr>
                            <td class="left">
                                <label for="userPosition">{{ labels.userPositionLabel }}</label>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div
                                    class="input-field"
                                    :class="{error: this.error !== ''}"
                                >
                                    <input
                                        id="userPosition"
                                        v-model.trim="userPosition"
                                        type="text"
                                        class="input-position-field"
                                    />
                                </div>
                                <div
                                    v-if="this.error !== ''"
                                    class="error-large"
                                >
                                    &nbsp;{{ this.error }}
                                </div>
                            </td>
                        </tr>
                        <tr><td>&nbsp;</td></tr>
                    </table>
                </div>
                <div class="buttons">
                    <button
                        class="button"
                        style="float: left; width: 176px;"
                        :disabled="isWorkingButtonDisable"
                        :class="{primary: isOperationStatusWorking && !isOperationStatusHousekeeping,
                                 secondary: !isOperationStatusWorking || isOperationStatusHousekeeping}"
                        @click="isOperationStatusWorking && !isOperationStatusHousekeeping ? setVisible(false) :
                            workingClick.apply(presenter, [presenter, userPosition])"
                    >
                        <table>
                            <tr>
                                <td>
                                    <img
                                        style="width: 26px;"
                                        src="/resources/static/images/Rtg.svg"
                                    >
                                </td>
                                <td
                                    align="center"
                                    width="90%"
                                >
                                    {{ labels.workingButtonLabel }}
                                </td>
                            </tr>
                        </table>
                    </button>
                    <button
                        class="button"
                        :class="{primary: !isOperationStatusWorking && !isOperationStatusHousekeeping,
                                 secondary: isOperationStatusWorking || isOperationStatusHousekeeping}"
                        :disabled="isUnavailableButtonDisable"
                        style="float: right; width: 176px"
                        @click="isOperationStatusWorking ? unavailableClick.apply(presenter, [presenter]) :
                            stayUnavailableClick.apply(presenter, [presenter])"
                    >
                        <table>
                            <tr>
                                <td>
                                    <img
                                        style="width: 26px;"
                                        src="/resources/static/images/Clock.svg"
                                    >
                                </td>
                                <td
                                    align="center"
                                    width="90%"
                                >
                                    {{ labels.unavailableButtonLabel }}
                                </td>
                            </tr>
                        </table>
                    </button>
                    <button
                        v-if="isShowHousekeepingButton"
                        class="button"
                        :class="{primary: isOperationStatusHousekeeping,
                                 secondary: !isOperationStatusHousekeeping}"
                        style="float: right; width: 176px"
                        @click="!isOperationStatusHousekeeping ? housekeepingClick.apply(presenter, [presenter]) :
                            setVisible(false)"
                    >
                        <table>
                            <tr>
                                <td>
                                    <img
                                        style="width: 26px;"
                                        src="/resources/static/images/Housekeeping.svg"
                                    >
                                </td>
                                <td
                                    align="center"
                                    width="90%"
                                >
                                    {{ labels.housekeepingButtonLabel }}
                                </td>
                            </tr>
                        </table>
                    </button>
                </div>
            </div>
        </div>

        <div class="bottom">
            <button
                class="button close-button"
                @click="setVisible(false)"
            >
                <img
                    style="filter: invert(100%); width: 26px;"
                    src="/resources/static/images/Close.svg"
                    alt="Close icon"
                >
            </button>
        </div>
    </div>
</template>

<script>
import Localizations from '../../../utils/Localizations';
import GlobalState from '../../../state/GlobalState';

export default {
    name: 'OperationStatusScreen',
    props: [
        'presenter',
        'workingClick',
        'unavailableClick',
        'housekeepingClick',
        'stayUnavailableClick',
        'completeToTruckClick',
        'rehandleClick',
        'cancelClick'
    ],
    /**
     * Data section of this UI component
     * @return {Object}
     */
    data() {
        return {
            visible: false,
            labels: Localizations.getTranslatedLabels('overlayPanel')['operationStatus'],
            userInput: '',
            userPosition: '',
            state: 'operationStatus',
            error: '',
            isOperationStatusWorking: false,
            isOperationStatusHousekeeping: false,
            isShowHousekeepingButton: false,
            isShowLocSlotOnCarriage: false,
            selectedSlot: '',
            cheType: ''
        };
    }, 
    computed: {
        isWorkingButtonDisable: () => !GlobalState.isWorkingButtonEnabled(),
        isUnavailableButtonDisable: () => !GlobalState.isUnavailableButtonEnabled()
    },
    watch: {
        userInput: function (val, oldVal) {
            // clears error once userInput is cleared
            if (val.length === 0) {
                this.error = '';
            }
        }
    },
    methods: {
        setVisible: function (inVisible) {
            this.visible = inVisible;
        },
        setState: function (inState) {
            if (this.state === inState) {
                return;  // already in the same state
            }
            if (this.state !== inState) {
                this.state = inState;
                this.labels = Localizations.getTranslatedLabels('overlayPanel')[this.state];
            }
            this.userInput = '';
            this.error = '';
            this.isShowLocSlotOnCarriage = false;
            this.selectedSlot = '';
        },
        setOperationStatusIsWorking(inIsOperationStatusWorking) {
            this.isOperationStatusWorking = inIsOperationStatusWorking;
        },
        /**
         * Set housekeeping mode
         * @param {boolean} inIsOperationStatusHousekeeping
         */
        setOperationStatusHousekeeping(inIsOperationStatusHousekeeping) {
            this.isOperationStatusHousekeeping = inIsOperationStatusHousekeeping;
        },
        /**
         * Set whether to show the housekeeping button
         * @param {boolean} inIsShowHousekeepingButton
         */
        setIsShowHousekeepingButton(inIsShowHousekeepingButton) {
            this.isShowHousekeepingButton = inIsShowHousekeepingButton;
        },
        setError: function (inReason) {
            this.error = inReason;
        },
        showLessThan5Msg: function () {
            this.error = this.labels.lessThan5ErrorLabel;
        },
        handleCancel: function () {
            this.cancelClick(this.presenter);
        },
        handleCompleteToTruck: function () {
            let locSlotOnCarriage;
            if (!this.isShowLocSlotOnCarriage) {
                locSlotOnCarriage = '2';
            } else {
                locSlotOnCarriage = this.selectedSlot;
            }
            this.completeToTruckClick(this.presenter, this.userInput, locSlotOnCarriage);
        },
        setIsShowLocSlotOnCarriage: function (inIsShowLocSlotOnCarriage) {
            this.isShowLocSlotOnCarriage = inIsShowLocSlotOnCarriage;
        },
        setSelectedSlotOne: function () {
            this.selectedSlot = '1';
        },
        setSelectedSlotThree: function () {
            this.selectedSlot = '3';
        },
        /**
         * Sets Che Type
         * @param {String} inCheType
         */
        setCheType: function (inCheType) {
            this.cheType = inCheType;
        },
        /**
         * Method to set Block and Row value.
         * @param {string} inPosition
         */
        setPosition: function(inPosition) {
            this.userPosition = inPosition;
        }
    }
};
</script>

<style scoped>
    .operationStatusScreen {
        position: absolute;
        z-index: 100;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: var(--color-secondary-70);
        color: white;
    }

    .container {
        width: 350px;
        height: 150px;
        position: absolute;
        left: 50%;
        top: 40%;
        transform: translate(-50%, -50%);
    }

    .title {
        text-align: center;
        padding-top: 20px;
        padding-bottom: 20px;
        color: var(--color-white);
    }

    .left {
        text-align: left;
        vertical-align: middle;
    }

    .center {
        text-align: center;
        vertical-align: middle;
    }

    .center.error {
        padding-top: 2px;
        font-size: 12px;
        color: red;
        text-align: left;
        transform: translateX(7px);
    }

    .error-large {
        width: 340px;
        font-size: 16px;
        color: white;
        text-align: left;
        border-radius: 4px;
        border: 1px solid var(--color-danger);
        background-color: var(--color-danger);
        display: block;
        position: relative;
        margin: -4px 2px 2px;
    }


    .operation-status {
        width: 368px;
        margin: auto;
    }

    .operation-status .buttons {
      display: grid;
      grid-auto-columns: 1fr;
      grid-auto-flow: column;
      justify-content: center;
      margin: auto;
      column-gap: 10px;
    }

    .input-field {
        width: 340px;
        height: 32px;
        border-radius: 4px;
        border: 1px solid var(--color-secondary);
        background-color: var(--color-white);
        display: block;
        position: relative;
        margin: 2px;
    }

    .input-field input {
        float: left;
        height: 30px;
        border: none;
        background: none;
        border-radius: 4px;
        font-size: 16px;
        padding-left: 9px;
        box-sizing: border-box;
    }

    .input-field img {
        padding-top: 5px;
        color: var(--color-dark);
    }

    /* This is where you can change the color of the input field and it's icon */
    .input-field.error {
        border: 1px solid var(--color-danger);
    }

    .input-field.error input {
        color: var(--color-danger);
    }

    .input-field.error img {
        filter: var(--filter-danger);
    }

    .full-width {
        width: 100%;
    }

    .input-position-field {
        height: 30px;
        width: 100%;
        font-size: 16px;
    }

    .bottom {
        position: fixed;
        bottom: 0;
        width: 100%;
        height: 75px;
    }

    .close-button {
        float: right;
        width: 75px;
        height:100%;
        border: none;
        background-color: transparent;
    }

</style>
