<template>
  <div class="profile-tabs custom-checkboxes-group">
    <div class="profile-tabs-checkboxes custom-checkboxes">
      <div v-for="tab in tabs" class="profile-tab custom-checkbox" :key="tab">
        <label>
          <input
            type="radio"
            :id="tab"
            :name="tab"
            :checked="selectedTab.split('/')[0] === tab"
            :disabled="disabled"
            @input="$router.push(getPath(tab))"
          />
          <span>{{ $t(`user.PROFILE.TABS.${tab}`) }}</span>
        </label>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { toRefs, withDefaults } from 'vue'

  interface Props {
    tabs: string[]
    selectedTab: string
    edition: boolean
    disabled?: boolean
  }
  const props = withDefaults(defineProps<Props>(), {
    disabled: false,
  })

  const { tabs, selectedTab, disabled } = toRefs(props)

  function getPath(tab: string) {
    switch (tab) {
      case 'ACCOUNT':
      case 'PICTURE':
        return `/profile/edit/${tab.toLocaleLowerCase()}`
      case 'APPS':
      case 'PREFERENCES':
      case 'SPORTS':
        return `/profile${
          props.edition ? '/edit' : ''
        }/${tab.toLocaleLowerCase()}`
      default:
      case 'PROFILE':
        return `/profile${props.edition ? '/edit' : ''}`
    }
  }
</script>

<style lang="scss">
  @import '~@/scss/vars.scss';

  .profile-tabs-checkboxes {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: $default-margin * 0.5;
  }
</style>
