<script setup lang="ts">
import { computed } from 'vue'
import CircleCheckIcon from '@/assets/icons/CircleCheckIcon.vue'
import CircleIcon from '@/assets/icons/CircleIcon.vue'

interface LocaleOption {
  code: string
  name: string
  flag: string
}

interface Props {
  modelValue: string
  id: string
  locales: LocaleOption[]
}

interface Emits {
  (e: 'update:modelValue', value: string): void
}

const props = defineProps<Props>()
const emit = defineEmits<Emits>()

const selectModel = computed({
  get() {
    return props.modelValue
  },
  set(value) {
    emit('update:modelValue', value)
  }
})
</script>

<template>
  <div class="localeselect">
    <div v-for="locale in locales" class="localeselect__locale" :key="`locale-${locale.code}`">
      <input
        type="radio"
        name="lang"
        class="localeselect__input"
        :id="`lang-${locale.code}`"
        :value="locale.code"
        v-model="selectModel"
      />
      <label class="localeselect__label" :for="`lang-${locale.code}`">
        <CircleCheckIcon v-if="$i18n.locale === locale.code" />
        <CircleIcon v-else />
        <span>{{ locale.name }} {{ locale.flag }}</span>
      </label>
    </div>
  </div>
</template>

<style lang="scss">
.localeselect {
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: stretch;

  margin: var(--paragraph-margin) 0;

  &__locale {
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: center;
  }

  &__input {
    display: none;
  }

  &__label {
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: center;

    svg {
      flex: 1 0 1.25rem;
      fill: var(--color-text);
      transition: 0.4s;
    }

    span {
      flex: 1 0 auto;
      margin: 0 0 0 0.5rem;
    }
  }
}
</style>
