<template>
  <div class="users-modal-tabs-container">
    <div class="tabs-container">
      <ul class="tabs">
        <li
          :class="{ active: isActiveTab('contacts') }"
          class="tab"
          @click="setCurrentTab('contacts')"
        >
          <BaseText :dark-mode="true">
            {{ $_tr('contacts') }}
          </BaseText>
        </li>

        <li
          :class="{ active: isActiveTab('infos') }"
          class="tab"
          @click="setCurrentTab('infos')"
        >
          <BaseText :dark-mode="true">
            {{ $_tr('infos') }}
          </BaseText>
        </li>
      </ul>
    </div>

    <div class="main-content">
      <component v-bind="{ heritedData }" :is="activeComponent" class="tab" />
    </div>
  </div>
</template>

<script>
import UsersModalContacts from './UsersModalContacts'
import UsersModalInfos from './UsersModalInfos'

import { BaseText } from 'inside-collection/atoms'

export default {
  name: 'UsersModalTabs',
  $_i18nRootPath: 'customs.USERS.MODAL.TABS',
  components: { UsersModalContacts, UsersModalInfos, BaseText },
  data() {
    return {
      activeComponent: null
    }
  },
  computed: {
    tabs() {
      return {
        contacts: 'UsersModalContacts',
        infos: 'UsersModalInfos'
      }
    }
  },
  created() {
    this.activeComponent = this.tabs.contacts
  },
  methods: {
    setCurrentTab(tab) {
      this.activeComponent = this.tabs[tab]
    },
    isActiveTab(tab) {
      return this.tabs[tab] === this.activeComponent
    }
  }
}
</script>

<style lang="scss">
@use '@inside-library/styles/mixins/partials/common-mixin' as *;

.users-modal-tabs-container {
  .tabs-container {
    background: var(--color-primary);
    padding-left: calc(var(--spacing-3xl) * 2 + var(--spacing-m));

    @include tablet {
      padding-left: var(--spacing-xl);
    }

    @include mobile {
      padding-left: var(--spacing-m);
    }

    .tabs {
      display: flex;

      .tab {
        padding: var(--spacing-s) var(--spacing-m);
        text-transform: uppercase;
        list-style-type: none;
        cursor: pointer;

        &.active {
          border-bottom: solid 6px var(--color-light);
        }
      }
    }
  }

  .main-content {
    margin-top: var(--spacing-3xl);
    padding-left: calc(var(--spacing-3xl) * 2 + var(--spacing-m));
    padding-bottom: var(--spacing-xxl);

    @include tablet {
      padding-left: var(--spacing-xl);
    }

    @include mobile {
      padding-left: var(--spacing-m);
    }

    .tab {
      display: flex;
      flex-direction: column;
      flex-wrap: wrap;
      justify-content: space-between;

      & > {
        .modal__section {
          width: 85%;

          &.small {
            width: 90%;
            margin-bottom: var(--spacing-xxl);
          }
        }
      }
    }
  }
}
</style>
