<template>
  <div class="language-switcher">
    <pill-radio-buttons
      data-cy="language-switcher-buttons"
      :items="languages"
      :selected-item="language"
      @update:selected-item="changeLanguage"
    />
  </div>
</template>

<script setup lang="ts">
import { graphql } from '@/__generated__';
import { useMutation, useQuery } from '@vue/apollo-composable';
import { computed } from '@vue/reactivity';
import PillRadioButtons from '@/components/ui/PillRadioButtons.vue';

const { result } = useQuery(
  graphql(`
    query LanguageQuery {
      me {
        language @client
      }
    }
  `)
);

const languages = ['de', 'en', 'fr'];
const language = computed(() => result.value?.me.language || 'de');
const { mutate: changeLanguageMutation } = useMutation(
  graphql(`
    mutation SetLanguage($language: String!) {
      setLanguage(language: $language) @client {
        language
      }
    }
  `)
);

const changeLanguage = (lang: string) => changeLanguageMutation({ language: lang });
</script>

<style scoped lang="scss">
@import 'styles/helpers';
.language-switcher {
  width: 100%;
  @include desktop {
    width: auto;
  }
}
</style>
