<template>
    <div>
        <div class="tab-buttons">
            <button
                type="button"
                :class="['tab-button', templateActiveTab === tab ? 'active' : '']"
                v-for="tab in templateTabs"
                @click="templateActiveTab = tab"
            >
                {{ tab }}
            </button>
        </div>

        <div v-for="tab in templateTabs" :class="['tab', 'tab-'+tab.toLowerCase(), templateActiveTab === tab ? 'active' : '']">
            <slot :name="tab">{{ tab }}</slot>
        </div>
    </div>
</template>

<script>
import {mapGetters} from "vuex";

export default {
    name: "tabs",
    props: {
        fixedTabs: {
            type: Array,
            required: true,
            default: []
        },
        hasLanguageTabs: {
            type: Boolean,
            required: false,
            default: false
        }
    },
    data: function() {
      return {
          activeTab: null
      }
    },
    computed: {
        ...mapGetters({
            trans: "g11n/translation/translation",
            languagesHavingSites: "sites/languagesHavingSites",
        }),
        templateActiveTab: {
            set: function(value) {
                this.initActiveTabIfNeeded()
                this.activeTab = value;
            },
            get: function() {
                this.initActiveTabIfNeeded()
                return this.activeTab
            }
        },
        templateTabs: function() {
            let tabs = []

            this.fixedTabs.forEach((fixedTab) => tabs.push(fixedTab))
            if(this.hasLanguageTabs) this.languagesHavingSites().forEach((language) => tabs.push(language.iso_2))

            return tabs;
        }
    },
    methods: {
        initActiveTabIfNeeded: function() {
            if(this.activeTab === null && this.templateTabs.length > 0) {
                this.activeTab = this.templateTabs[0];
            }
        }
    },
    mounted() {
        const languageTabs = this.languagesHavingSites().map((language) => language.iso_2);
        this.$emit('languageTabsLoaded', languageTabs)
    }
}
</script>

<style scoped>
    .tab-button {
        padding: 6px 10px;
        border-top-left-radius: 3px;
        border-top-right-radius: 3px;
        border: 1px solid #ccc;
        cursor: pointer;
        background: #f0f0f0;
        margin-bottom: -1px;
        margin-right: -1px;
    }
    .tab-button:hover {
        background: #e0e0e0;
    }
    .tab-button.active {
        background: #e0e0e0;
    }
    .tab {
        display: none;
        border: 1px solid #ccc;
        padding: 10px;
    }
    .tab.active {
        display: block;
    }
</style>