<template>
  <div class="pankow-tabview" :top="tabPosition === 'top' ? true : null" :left="tabPosition === 'left' ? true : null" :right="tabPosition === 'right' ? true : null" :bottom="tabPosition === 'bottom' ? true : null">
    <div class="pankow-tabview-tabs" v-if="tabPosition === 'top' || tabPosition === 'left'">
      <div class="pankow-tabview-tab" :class="{'active': active === tab }" v-for="tab in Object.keys(tabs)" @click="open(tab)">{{ tabs[tab] }}</div>
    </div>
    <div class="pankow-tabview-content">
      <div v-for="tab in Object.keys(tabs)">
        <slot :name="tab" v-if="active === tab"/>
      </div>
    </div>
    <div class="pankow-tabview-tabs" v-if="tabPosition === 'bottom' || tabPosition === 'right'">
      <div class="pankow-tabview-tab" :class="{'active': active === tab }" v-for="tab in Object.keys(tabs)" @click="open(tab)">{{ tabs[tab] }}</div>
    </div>
  </div>
</template>

<script>

export default {
  name: 'TabView',
  emits: [ 'changed' ],
  props: {
    tabs: {
      type: Object,
      default: {}
    },
    defaultActive: String,
    tabPosition: {
      type: String,
      default: 'top',
    }
  },
  data() {
    return {
      active: ''
    };
  },
  mounted() {
    this.active = this.defaultActive;
  },
  methods: {
    open(key) {
      if (this.active === key) return;

      this.active = key;
      this.$emit('changed', key);
    }
  }
};

</script>

<style>

.pankow-tabview {
  display: flex;
  flex-direction: column;
}

.pankow-tabview[left],
.pankow-tabview[right] {
  flex-direction: row;
}

.pankow-tabview-tabs {
  display: flex;
}

.pankow-tabview[top] .pankow-tabview-tabs {
  align-items: center;
  border-bottom: solid 1px var(--pankow-color-light-dark);
}

.pankow-tabview[bottom] .pankow-tabview-tabs {
  align-items: center;
  border-top: solid 1px var(--pankow-color-light-dark);
}

.pankow-tabview[left] .pankow-tabview-tabs {
  border-right: solid 1px var(--pankow-color-light-dark);
  flex-direction: column;
  align-items: end;
}

.pankow-tabview[right] .pankow-tabview-tabs {
  border-left: solid 1px var(--pankow-color-light-dark);
  flex-direction: column;
  align-items: start;
}

.pankow-tabview-tab {
  cursor: pointer;
  text-align: center;
  padding: 7px 12px;
  user-select: none;
  white-space: nowrap;
}

.pankow-tabview[top] .pankow-tabview-tab {
  border-top-left-radius: var(--pankow-border-radius);
  border-top-right-radius: var(--pankow-border-radius);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  margin: 0 4px 0 0;
}

.pankow-tabview[bottom] .pankow-tabview-tab {
  border-bottom-left-radius: var(--pankow-border-radius);
  border-bottom-right-radius: var(--pankow-border-radius);
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  margin: 0 4px 0 0;
}

.pankow-tabview[left] .pankow-tabview-tab {
  border-top-left-radius: var(--pankow-border-radius);
  border-top-right-radius: 0;
  border-bottom-left-radius: var(--pankow-border-radius);
  border-bottom-right-radius: 0;
  margin: 0;
}

.pankow-tabview[right] .pankow-tabview-tab {
  border-top-right-radius: var(--pankow-border-radius);
  border-top-left-radius: 0;
  border-bottom-right-radius: var(--pankow-border-radius);
  border-bottom-left-radius: 0;
  margin: 0;
}

.pankow-tabview-tab:hover {
  background-color: var(--pankow-color-background-hover);
}

.pankow-tabview-tab.active {
  background-color: var(--pankow-color-light-dark);
}

@media (prefers-color-scheme: dark) {
  .pankow-tabview-tab.active {
    color: var(--pankow-text-color-alt);
  }
}

.pankow-tabview[top] .pankow-tabview-content {
  margin-top: 10px;
}

.pankow-tabview[bottom] .pankow-tabview-content {
  margin-bottom: 10px;
}

.pankow-tabview[left] .pankow-tabview-content {
  margin-left: 10px;
}

.pankow-tabview[right] .pankow-tabview-content {
  margin-right: 10px;
}

</style>