<template>
    <div class="mainContent">
        <slot :response="response" :loading="loading"></slot>
    </div>
</template>

<script>
  // require modules
  /* eslint-disable no-unused-vars */
  const _ = require('lodash');
  let host = require('../js/const').host;

  export default {
    name: "fetchCondensate",
    props: ['condensate'],
    data() {
      return {
        response: null,
        loading: false,
        isDev: process.env.NODE_ENV === 'development'
      }
    },
    methods: {
      getItems() {
        const vm = this

        // /* eslint-disable no-console */
        // console.log(vm.incDesc);

        vm.loading = true

        if(vm.isDev) {
          host = require('../js/const').devHost;
        }

        let url = `${host}/condensates/${vm.condensate}`;

        if (vm.condensate && !_.isEmpty(vm.condensate)) {
          fetch(url)
            .then(response => response.json())
            .then((response) => {
              // /* eslint-disable no-console */
              // console.log(response);

              setTimeout(() => {
                vm.loading = false;
                vm.response = response

                // console.log(response);
                // if (response && !_.isEmpty(response)) {
                //   this.response = _.flatMap(response, (n) => [{ text: n.name, style: 'background-color: ' + n.color }]);
                // }
              }, 10);
            });
        } else {
          vm.loading = false;
          vm.response = ''
        }
      }
    },
    mounted() {
      const vm = this
      // /* eslint-disable no-console */
      // console.log(vm.locus);
      vm.getItems();
    },
  }
</script>

<style scoped>
    .mainContent {
        padding: 20px;
    }
</style>