<!--
// Sshwifty - A Web SSH client
//
// Copyright (C) 2019 Rui NI <nirui@gmx.com>
//
// This program is free software: you can redistribute it and/or modify
// it under the terms of the GNU Affero General Public License as
// published by the Free Software Foundation, either version 3 of the
// License, or (at your option) any later version.
//
// This program is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
// GNU Affero General Public License for more details.
//
// You should have received a copy of the GNU Affero General Public License
// along with this program.  If not, see <https://www.gnu.org/licenses/>.
-->

<template>
  <ul :id="id" :class="tabsClass">
    <li
      v-for="(tabInfo, idx) in tabs"
      :key="tabInfo.id"
      :class="{
        active: tab === idx,
        error: tabInfo.indicator.error.length > 0,
        updated: tabInfo.indicator.updated
      }"
      :style="
        'background: ' +
          (tab === idx
            ? tabInfo.control.activeColor()
            : tabInfo.control.color())
      "
      @click="switchTo(idx)"
    >
      <span class="title" :title="tabInfo.name">
        <span
          class="type"
          :title="tabInfo.info.name()"
          :style="'background: ' + tabInfo.info.color()"
        >
          {{ tabInfo.info.name()[0] }}
        </span>
        {{ tabInfo.name }}
      </span>

      <span class="icon icon-close icon-close1" @click="closeAt(idx)"></span>
    </li>
  </ul>
</template>

<script>
export default {
  props: {
    id: {
      type: String,
      default: ""
    },
    tab: {
      type: Number,
      default: 0
    },
    tabs: {
      type: Array,
      default: () => []
    },
    tabsClass: {
      type: String,
      default: ""
    }
  },
  watch: {
    tab(newVal) {
      this.switchTo(newVal);
    },
    tabs(newVal) {
      if (newVal.length > this.tab) {
        return;
      }

      this.switchTo(newVal.length - 1);
    }
  },
  methods: {
    switchTo(index) {
      if (index < 0 || index >= this.tabs.length) {
        return;
      }

      if (this.tab == index) {
        return;
      }

      this.$emit("current", index);
    },
    closeAt(index) {
      this.$emit("close", index);
    }
  }
};
</script>
