<template>
  <v-card flat>
    <v-card-text>
      <v-container fluid class="pa-0 ma-0">
        <v-row class="pa-0 ma-0">
          <v-col cols="6" class="pa-0 ma-0">
            <v-radio-group v-model="catalogType" class="pa-0 ma-0">
              <v-radio class="pa-0 ma-0"
                       label="My catalogs"
                       on-icon="radio_button_checked"
                       off-icon="radio_button_unchecked"
                       value="mine"/>
            </v-radio-group>
          </v-col>
          <v-col cols="6" class="pa-0 ma-0">
            <v-radio-group v-model="catalogType" class="pa-0 ma-0">
              <v-radio class="pa-0 ma-0"
                       label="Public catalogs"
                       value="public"/>
            </v-radio-group>
          </v-col>
        </v-row>
      </v-container>

      <v-autocomplete
        v-model="selectedCatalog"
        :items="catalogChoices"
        :loading="isLoading"
        :search-input.sync="search"
        item-text="name"
        item-value="id"
        label="Select catalog"
        :no-data-text="noDataText"
        outlined
      />
    </v-card-text>
  </v-card>
</template>

<script>
export default {
  props: {
    value: {
      type: Number,
      required: true,
      default: -1,
    },
  },
  data: () => ({
    myCatalogs: null,
    publicCatalogs: null,
    catalogTypeInternal: 'mine',
    isLoading: false,
    search: null,
  }),
  computed: {
    catalogType: {
      get() {
        return this.catalogTypeInternal
      },
      set(value) {
        this.catalogTypeInternal = value
        this.value = -1
      }
    },
    catalogChoices: {
      get() {
        if (this.catalogTypeInternal === 'mine') {
          //if (this.myCatalogs.length < 1) {
          //this.isLoading = true
          /* fetch('/api/v1/catalogs/mine')
             *   .then(res => this.myCatalogs = res.json())
             *   .catch(err => {
             *     // TODO
             *     console.log(err)
             *   })
             *   .finally(() => (this.isLoading = false))
             * } */
          //}
          //return this.myCatalogs
          return [{ name: 'SS20 New Zealand' }, { name: 'SS20 Australia' }]
        } else {
          return [{ name: 'SS20 New Zealand - Joe User' }, { name: 'SS20 Australia - Joe User' }]
        }
      },
    },
  },
}
</script>
