<template>
  <div id="color_dropdown" class="component component-color_dropdown">
    <dropdown :options="colorOptions" option-label="label" v-model="selectedValue" />
    <div class="color-container">
      <div class="color-circle" :class="(!!selectedValue) ? selectedValue.value : ''"></div>
    </div>
  </div>
</template>

<script>
  export default {
    props: [
      "value",
      "colors",
      "showAllColors",
      "disabled",
      "prependColors",
      "appendColors"
    ],
    data() {
      return {
        minColors: [
          { label: "Light", value: "light" },
          { label: "Dark", value: "dark" },
          { label: "Primary", value: "primary-color" },
          { label: "Secondary", value: "secondary-color" },
          { label: "Tertiary", value: "tertiary-color" }
        ],
        allColors: [
          { label: "Light", value: "light" },
          { label: "Dark", value: "dark" },
          { label: "Primary", value: "primary-color" },
          { label: "Secondary", value: "secondary-color" },
          { label: "Tertiary", value: "tertiary-color" },
          { label: "Quaternary", value: "quaternary-color" },
          { label: "Quinary", value: "quinary-color" }
        ]
      }
    },
    computed: {
      selectedValue: {
        get() {
          const self = this;
          return this.colorOptions.find( function(option) {
            return option.value === self.value;
          });
        },
        set(val) {
          this.$emit('input', val.value);
          this.$emit('change');
        }
      },
      colorOptions: function() {
        if (!!this.showAllColors || this.showAllColors === "") {
          return this.addAdditionalColors(this.allColors);
        }
        else {
          return this.addAdditionalColors(this.minColors);
        }
      }
    },
    methods: {
        addAdditionalColors(baseArray) {
            let compiledArray = baseArray;

            if (!!this.prependColors) {
                compiledArray = [...this.prependColors, ...compiledArray];
            }

            if (!!this.appendColors) {
                compiledArray = [...compiledArray, ...this.appendColors];
            }

            return compiledArray;
        }
    }
  }
</script>
