<template>
    <div
        v-if="isVisible"
        class="tbd-details-form"
    >
        <!-- using top spacer to avoid positioning changes when input displays error message -->
        <div style="width: 100%; height: 20%;"></div>
        <!-- using data-theme dark since elements are set against dark background in this overlay
             regardless of main app theme -->
        <div
            data-theme="dark"
            class="form-container"
        >
            <div class="form-text">
                <span class="form-title">
                    {{ labels.title }}
                </span>
                <span class="tbd-unit-attribute">
                    {{ labels.lineOperator }}: {{ tbdUnitLineOperator }}
                </span>
                <span class="tbd-unit-attribute">
                    {{ labels.type }}: {{ tbdUnitType }}
                </span>
                <span class="tbd-unit-attribute">
                    {{ labels.destination }}: {{ tbdUnitDestination }}
                </span>
            </div>
            <div class="input-container">
                <InputBasic
                    id="tbd-details-container-id-input"
                    iconName="container"
                    :fieldErrorMsg="errorMessage"
                    @onValueChange="onInputValueChange"
                />
            </div>
            <div class="buttons">
                <ButtonBasic
                    class="tbd-details-form-btn cancel"
                    :label="labels.cancelButtonLabel"
                    type="secondary"
                    size="nvmt-size-2"
                    @click="cancelButtonClicked"
                />
                <ButtonBasic
                    class="tbd-details-form-btn merge-container"
                    :label="labels.mergeContainerButtonLabel"
                    type="primary"
                    size="nvmt-size"
                    @click="mergeContainerButtonClicked"
                />
            </div>
        </div>
    </div>
</template>

<script>
import {OverlayPanelPresenter} from '../../../presenters/OverlayPanelPresenter';
import ButtonBasic from '@navis-npm/tos-storybook/src/components/buttons/ButtonBasic';
import InputBasic from '@navis-npm/tos-storybook/src/components/input/InputBasic';
import Localizations from '../../../utils/Localizations';

export default {
    name: 'TbdDetailsForm',
    components: {
        ButtonBasic,
        InputBasic
    },
    props: {
        presenter: {
            type: OverlayPanelPresenter,
            required: true
        },
        cancelButtonClick: {
            type: Function,
            required: false,
            default: () => {}
        },
        mergeContainerButtonClick: {
            type: Function,
            required: false,
            default: () => {}
        }
    },
    /**
     * Data section of this UI component
     * @return {Object}
     */
    data() {
        return {
            labels: Localizations.getTranslatedLabels('overlayPanel')['tbdDetailsForm'],
            isVisible: false,
            tbdJob: null,
            containerIdValue: '',
            errorMessage: ''
        };
    },
    computed: {
        /**
         * Line operator
         * @returns {string}
         */
        tbdUnitLineOperator() {
            return this.tbdJob ? this.tbdJob.lineOperator : '';
        },
        /**
         * Container type (length, ISO group, height)
         * @returns {string}
         */
        tbdUnitType() {
            if (!this.tbdJob) {
                return '';
            }
            return [this.tbdJob.formattedEquipmentLength, this.tbdJob.isoGroup, this.tbdJob.heightDisplay].join(' ');
        },
        /**
         * Destination
         * @returns {string}
         */
        tbdUnitDestination() {
            return this.tbdJob ? this.tbdJob.toPosition.id : '';
        }
    },
    methods: {
        /**
         * Function to set the visibility of the job list sort and filter form
         * @param {boolean} inIsToBeVisible
         */
        setVisible(inIsToBeVisible) {
            this.isVisible = inIsToBeVisible;
        },
        /**
         * Set TBD job to display details for
         * @param {Job} inTbdJob
         */
        setTbdJob(inTbdJob) {
            this.tbdJob = inTbdJob;
        },
        /**
         * Reset error message if present and update input value for container ID
         * @param {string} inNewVal
         */
        onInputValueChange(inNewVal) {
            if (this.errorMessage) {
                this.resetError();
            }
            this.containerIdValue = inNewVal;
        },
        /**
         * Callback function called when cancel button is clicked
         * Cancel the given TBD job
         */
        cancelButtonClicked() {
            this.cancelButtonClick(this.presenter);
        },
        /**
         * Callback function called when merge container button is clicked
         * Send TBD unit ID and entered container ID
         */
        mergeContainerButtonClicked() {
            this.mergeContainerButtonClick(
                this.presenter,
                this.tbdJob ? this.tbdJob.equipmentId : '',
                this.containerIdValue
            );
        },
        /**
         * Set error message coming from ECN4
         * @param {string} inReason
         */
        setError(inReason) {
            this.errorMessage = inReason;
        },
        /**
         * Reset error message
         */
        resetError() {
            this.errorMessage = '';
        }
    }
};
</script>

<style scoped>
.tbd-details-form {
    position: absolute;
    z-index: 100;
    left: 0;
    top: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 100%;
    background-color: var(--color-secondary-70);
    color: var(--color-white);
    font-family: Helvetica, Arial, sans-serif;
}
.form-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 300px;
}
.form-text {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.form-title {
    margin-bottom: 8px;
    font-size: 24px;
}
.tbd-unit-attribute {
    font-size: 16px;
}
.tbd-unit-attribute:not(:last-child) {
    margin-bottom: 16px;
}
.input-container {
    margin: 64px 0 40px;
    width: 300px;
}
.buttons {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.tbd-details-form-btn.cancel {
    margin-right: 50px;
}
</style>