<template>
  <div id="app">
    <div class="main">
      <div class="flex">
        <p>Select country:</p>
        <Selector
          :options="allCountries"
          :selector="'name'"
          :selectedIso="selectedIso"
          v-model="selectedCountry"
        />
        <svg viewBox="0 0 448 512" width="0.5em" height="0.5em">
          <path
            d="M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z"
          />
        </svg>
      </div>
    </div>
  </div>
</template>

<script>
import AllCountries from "./assets/all-countries.js";
import Selector from "./components/Selector.vue";
const DatoCmsPlugin = require("datocms-plugins-sdk");
export default {
  name: "app",
  components: { Selector },
  data() {
    return {
      selectedCountry: {},
      selectedIso: "",
      plugin: false
    };
  },
  watch: {
    selectedCountry: function() {
      if (this.plugin && this.selectedCountry)
        this.plugin.setFieldValue(
          this.plugin.fieldPath,
          this.selectedCountry.iso2
        );
    }
  },
  computed: {
    allCountries() {
      return AllCountries;
    }
  },
  mounted() {
    this.initPlugin();
  },
  methods: {
    async initPlugin() {
      this.plugin = await DatoCmsPlugin.init();
      this.plugin.startAutoResizer();
      let fieldValue = this.plugin.getFieldValue(this.plugin.fieldPath);
      this.selectedIso = fieldValue ? fieldValue : "BE";
    }
  }
};
</script>

<style lang="scss">
.main {
  font-family: colfax-web, Roboto, Helvetica Neue, Helvetica, Arial, sans-serif;
  .flex {
    display: flex;
    align-items: center;
  }
  .selector {
    margin-left: 4px;
  }
  svg {
    margin-left: 0;
  }
  .button {
    color: #70c8dc;
    cursor: pointer;
    margin: 0;
  }
}
</style>
