<template>
    <div
        v-if="visible"
        id="topSectionRight"
        class="operation-status"
        :class="{theme, twoPage: !isSinglePage}"
    >
        <div
            v-if="!isSinglePage && !isOperationStatusHousekeeping && filterType !=='' && sorterType !== ''"
            class="filer-sorter-section"
        >
            <span class="filter-sorter filter-section"><AppIcon :name="'filter'" />
                <div class="filter-sorter-text">{{ filterType }}</div>
            </span>
            <span class="filter-sorter sorter-section"><AppIcon :name="'jobList'" />
                <div
                    class="filter-sorter-text"
                    style="margin-left: 5px;"
                >{{ sorterType }}</div>
            </span>
        </div>
        <div
            class="btn-section"
            :class="{singlePage: isSinglePage}"
        >
            <div
                v-if="isOperationStatusHousekeeping"
                class="row-operations"
            >
                <InputBasic
                    id="rowInput"
                    class="row-input"
                    :label="labels.rowLabel"
                    :fieldErrorMsg="inputErrorMsg"
                    :value="currentRowLabel"
                    :transmitValueOnEnter="true"
                    @onEnterPressed="processInput"
                />
                <div
                    class="action-buttons"
                >
                    <ButtonIcon
                        iconName="collapse"
                        type="tertiary"
                        @click="processRowNavigationClick('prev')"
                    />
                    <ButtonIcon
                        iconName="expand"
                        type="tertiary"
                        @click="processRowNavigationClick('next')"
                    />
                </div>
            </div>
            <button
                class="button secondary cur-status"
                style="float: right"
                @click="showOperationClick(topSectionPresenter, isOperationStatusWorking)"
            >
                <img
                    v-if="!isOperationStatusHousekeeping"
                    src="/resources/static/images/Rtg.svg"
                    alt="rtg-icon"
                    class="icon"
                />
                <img
                    v-else
                    src="/resources/static/images/Housekeeping.svg"
                    alt="housekeeping-icon"
                    class="icon"
                />
                {{ getOperationStatus }}
            </button>
        </div>
    </div>
</template>

<script>
import Localizations from '../../../utils/Localizations';
import GlobalState from '../../../state/GlobalState';
import AppIcon from '@navis-npm/tos-storybook/src/components/icons/AppIcon';
import InputBasic from '@navis-npm/tos-storybook/src/components/input/InputBasic';
import ButtonIcon from '@navis-npm/tos-storybook/src/components/buttons/ButtonIcon';
import {TopSectionPresenter} from '../../../presenters/TopSectionPresenter';
export default {
    name: 'TopSectionRight',
    components: {
        AppIcon,
        InputBasic,
        ButtonIcon
    },
    props: {
        topSectionPresenter: {
            type: TopSectionPresenter,
            required: true
        },
        showOperationClick: {
            type: Function,
            required: false,
            default: () => {}
        },
        handleRowInput: {
            type: Function,
            required: false,
            default: () => {}
        },
        rowNavigationClick: {
            type: Function,
            required: false,
            default: () => {}
        }
    },
    /**
     * Data section of this UI component
     * @return {Object}
     */
    data: function() {
        return {
            visible: false,
            isOperationStatusWorking: false,
            isOperationStatusHousekeeping: false,
            labels: Localizations.getTranslatedLabels('topSection'),
            theme: 'theme-light',
            isSinglePage: GlobalState.isOnePage(),
            filterType: '',
            sorterType: '',
            currentRowLabel:'',
            inputErrorMsg:''
        };
    },
    computed: {
        /**
         * Get current operation status text
         * @returns {string}
         */
        getOperationStatus: function () {
            if (this.isOperationStatusHousekeeping) {
                return this.labels.housekeepingButtonLabel;
            }
            if (this.isOperationStatusWorking) {
                return this.labels.workingButtonLabel;
            }
            return this.labels.unavailableButtonLabel;
        }
    },
    methods: {
        /**
         * Function to set whether operation-status section is visible or not
         * @param {boolean} isVisible
         */
        setVisible: function(isVisible) {
            this.visible = isVisible;
        },
        /**
         * Function to set whether operation status is working or not
         * @param {boolean} inIsOperationStatusWorking
         */
        setOperationStatusIsWorking(inIsOperationStatusWorking) {
            this.isOperationStatusWorking = inIsOperationStatusWorking;
        },
        /**
         * Function to set whether application is in the housekeeping mode or not
         * @param {boolean} inIsOperationStatusHousekeeping
         */
        setOperationStatusIsHousekeeping(inIsOperationStatusHousekeeping) {
            this.isOperationStatusHousekeeping = inIsOperationStatusHousekeeping;
        },
        /**
         * Function to set current row label
         * @param {string} inRowLabel
         */
        setCurrentRowLabel(inRowLabel) {
            this.currentRowLabel = inRowLabel;
        },
        /**
         * Toggle theme between light/dark mode
         */
        toggleTheme: function() {
            this.theme = this.theme=== 'theme-light'? 'theme-dark': 'theme-light';
        },
        /**
         * Function to set Joblist filter and sorter value
         * @param {string[]} inFilterAndSorter
         */
        setFilterAndSorter: function(inFilterAndSorter) {
            this.filterType = inFilterAndSorter[0];
            this.sorterType = inFilterAndSorter[1];
        },
        /**
         * Process the row input when enter key is pressed
         * @param {string} inInputValue
         */
        processInput(inInputValue) {
            const rowLabel = inInputValue.trim();
            this.clearInputErrorMsg();
            this.handleRowInput(this.topSectionPresenter, rowLabel);
        },
        /**
         * Process adjacent row navigation click
         * @param {string} inDirection
         */
        processRowNavigationClick(inDirection) {
            this.clearInputErrorMsg();
            this.rowNavigationClick(this.topSectionPresenter, inDirection);
        },
        /**
         * Clear input error message
         */
        clearInputErrorMsg() {
            this.inputErrorMsg = '';
        },
        /**
         * Show invalid row label error
         */
        showInputErrorMsg() {
            this.inputErrorMsg = this.labels.invalidRowError;
        },
    }
};
</script>

<style scoped>
    .operation-status {
        margin-left: 15px;
    }
    .twoPage {
        width: 300px;
    }
    .btn-section {
        margin-top: 21px;
        margin-bottom: 21px;
        margin-right: 16px;
        float: right;
        display:flex;
     }
    .btn-section.singlePage {
      margin-top: 12px;
      margin-bottom: 12px;
      margin-right: 16px;
    }
    .button.secondary.cur-status {
        width: 168px;
        height: 50px;
    }
    .button img {
        vertical-align: middle;
        float: left;
        filter: var(--filter-white);
    }
    .filer-sorter-section {
        display: flex;
        position: absolute;
        margin-top: 7px;
    }
    .filter-sorter {
        display: flex;
        min-width: 130px;
        max-width: 160px;
    }
    .filter-sorter-text {
        margin-top: 5px;
        font-family: Roboto;
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        letter-spacing: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .filter-section {
        margin-left: -30px;
        margin-right: 20px;
    }
    .row-operations {
      display: flex;
      flex-flow: row;
      column-gap: 30px;
      width:300px;
      margin-right: 50px;
    }
    .action-buttons {
      display: flex;
      flex-flow: row;
      column-gap: 15px;
      margin-top: 22px;
    }
    .row-input {
      margin-top: 8px;
    }
    .cur-status {
      margin-top: 22px;
    }
</style>