<template>
  <swatches v-model="color" :colors="colors" :swatch-size="30" shapes="circles">
    <span slot="trigger" class="circle form__input" :style="style" />
  </swatches>
</template>

<script>
import Swatches from 'vue-swatches'
import 'vue-swatches/dist/vue-swatches.min.css'
export default {
  components: {
    Swatches
  },
  props: {
    tag: { type: Object, required: true },
    instanceId: {
      type: Number,
      required: true
    }
  },
  data() {
    return {
      color: this.tag.properties.get('color'),
      stroke: this.tag.properties.get('stroke'),
      colors: [
        '',
        '#4e79a7',
        '#f28e2c',
        '#e15759',
        '#76b7b2',
        '#59a14f',
        '#edc949',
        '#af7aa1',
        '#ff9da7',
        '#9c755f',
        '#bab0ab'
      ]
    }
  },
  computed: {
    style() {
      let color = this.tag.properties.get('color')
      let stroke = this.tag.properties.get('stroke')
      // TODO ask Kiki what gray color she wants for stroke
      if (!this.tag.properties.get('isVisualized')) {
        color = 'none'
        stroke = this.tag.properties.get('color')
      }
      return {
        '--bg-color': color,
        '--stroke': '1px solid ' + stroke
      }
    }
  },
  watch: {
    color() {
      this.$store.dispatch('data/changeTagColorOfTag', {
        slotId: this.instanceId,
        name: this.tag.name,
        color: this.color
      })
    }
  }
}
</script>

<style lang="sass">
.circle
  background: var(--bg-color)
  border: var(--stroke)
  border-radius: 50%
  width: 8px
  height: 8px
  margin-right: 8px
  display: inline-block
  cursor: pointer

.vue-swatches > div
  display: inline
</style>
