<template>
    <div
        v-if="isVisible"
        class="nextButtonArea"
    >
        <ButtonBasic
            class="next-btn"
            :label="formatNextButtonLabel(buttonState)"
            :type="'primary'"
            :size="'nvmt-size'"
            @click="isCheTypeTruck ? buttonClickTruck() : nextButtonClick.apply(presenter, [presenter])"
        />
    </div>
</template>

<script>
import Localizations from '../../../utils/Localizations';
import GlobalState from '../../../state/GlobalState';
import {TruckAreaVuexConstants} from '../../TruckAreaVuexConstants';
import ButtonBasic from '@navis-npm/tos-storybook/src/components/buttons/ButtonBasic';
export default {
    name: 'NextButton',
    components: {
        ButtonBasic
    },
    props: {
        presenter: {
            type: Object,
            required: false,
            default: null
        },
        nextButtonClick: {
            type: Function,
            required: false,
            default: () => {}
        }
    },
    /**
     * Data of vueJS component
     * @returns {Object}
     */
    data() {
        return {
            buttonState: 'NEXT',
            isVisible: false,
            isCheTypeTruck: GlobalState.isCheTypeTruck(),
            labels: Localizations.getTranslatedLabels('middleSection')
        };
    },
    methods: {
        /**
         * Set Next Button as visible
         * @param {boolean} inVisibility
         */
        setVisible(inVisibility) {
            this.isVisible = inVisibility;
        },
        /**
         * Set button text state to complete
         */
        setButtonStateComplete() {
            this.buttonState = 'COMPLETE';
        },
        /**
         * Set button text state to next
         */
        setButtonStateNext() {
            this.buttonState = 'NEXT';
        },
        /**
         * Next Button click for Truck Job
         */
        buttonClickTruck() {
            if (this.buttonState === 'NEXT') {
                this.$store.dispatch(TruckAreaVuexConstants.CLICK_NEXT_BUTTON_TRUCK);
            } else if (this.buttonState === 'COMPLETE') {
                this.$store.dispatch(TruckAreaVuexConstants.CLICK_COMPLETE_BUTTON_TRUCK);
            } else {
                console.error('Unknown button state for next/complete button');
            }
        },
        /**
         * Format next button label from button state as input
         * @param {string} inButtonState
         * @returns {string}
         */
        formatNextButtonLabel(inButtonState) {
            let label = inButtonState.toLowerCase();
            label = label.charAt(0).toUpperCase() + label.slice(1);
            return label;
        }
    }
};
</script>

<style scoped>
    .nextButtonArea {
        width: 166px;
        height: 64px;
        position: fixed;
        bottom: 74px;
        right: 0;
    }
    .next-btn {
        display: block;
        margin: 8px auto;
    }
</style>