<template>
  <Dropdown>
    <Button type="primary">
      {{ t(`survey_creator.common.languages.${this.language}`) }}
      <Icon type="ios-arrow-down"></Icon>
    </Button>
    <DropdownMenu slot="list">
      <DropdownItem
        :transfer="true"
        v-for="language in languages"
        :key="language"
        @click.native="onChangeLanguage(language)"
        >{{ t(`survey_creator.common.languages.${language}`) }}</DropdownItem
      >
    </DropdownMenu>
  </Dropdown>
</template>
<script lang="ts">
import Vue from "vue";
import {
  Button,
  Col,
  Dropdown,
  DropdownItem,
  DropdownMenu,
  Icon,
  Row,
} from "view-design";
import LocaleMixin from "../../mixins/locale-mixin";

export default Vue.extend({
  name: "change-language",
  mixins: [LocaleMixin],
  inject: ["$rootComponent"],
  components: { Button, Row, Col, Icon, Dropdown, DropdownItem, DropdownMenu },
  props: {
    languages: {
      type: Array,
      required: true,
    },
  },
  data() {
    return {
      language: Vue.$surveyLanguage,
    };
  },
  methods: {
    onChangeLanguage(language) {
      this.language = language;
      this.$rootComponent.onChangeLanguage(language);
    },
  },
});
</script>
