<template>
  <Row
    class="toolbar-wrapper"
    type="flex"
    justify="end"
    align="middle"
    :gutter="20"
  >
    <Col v-if="preview">
      <Button
        icon="ios-search"
        type="primary"
        @click="this.$rootComponent.onPreview"
        >{{ t("survey_creator.common.settings.preview") }}
      </Button>
    </Col>
    <Col v-if="changeLanguage">
      <change-language :languages="survey.options.languages"></change-language>
    </Col>
  </Row>
</template>
<script lang="ts">
import Vue from "vue";
import { Button, Col, Row } from "view-design";
import LocaleMixin from "../../mixins/locale-mixin";
import CreateQuestionDropdown from "./create-question-dropdown.vue";
import ChangeLanguage from "./change-language.vue";
import { SurveyModel } from "@wg-npm/survey-core";

export default Vue.extend({
  name: "toolbar",
  mixins: [LocaleMixin],
  inject: ["$rootComponent"],
  components: { Row, Col, Button, CreateQuestionDropdown, ChangeLanguage },
  props: {
    survey: {
      type: Object as () => SurveyModel,
      required: true,
    },
    createQuestion: {
      type: Boolean,
      required: false,
      default: true,
    },
    preview: {
      type: Boolean,
      required: false,
      default: true,
    },
    changeLanguage: {
      type: Boolean,
      required: false,
      default: true,
    },
  },
  methods: {
    onCreate(type) {
      this.$rootComponent.createQuestion(type);
    },
  },
});
</script>
