<template>
  <relation-picker
    v-model="valueCopy"
    :required="required"
    :readonly="readonly"
    :source="source"
    :display-component="$options.components.colorPickerItem">
  </relation-picker>
</template>

<script>
import { ValueSyncMixin } from '../value-sync-mixin.js';

import colorPickerItem from './color-picker-item.vue';
import relationPicker from './relation-picker.vue';

export default {
  docs: `Een color picker die via de <code>[UIHint("color-picker")]</code> attribuut gebruikt kan worden. Let wel op dat het datatype in C# een enum moet zijn.`,
  mixins: [ValueSyncMixin],
  props: {
    value: {
      validator: value => value === null || typeof value === 'string',
      required: true,
      demoValue: 'red',
    },
    schema: {
      type: Object,
      required: true,
      demoValue: () => ({
        options: [
          { key: 'red', displayName: 'Rood', value: 0xff0000 },
          { key: 'green', displayName: 'Groen', value: 0x00ff00 },
          { key: 'blue', displayName: 'Blauw', value: 0x0000ff },
        ],
      }),
    },
    required: {
      type: Boolean,
      default: false,
      docs: `Optie of je ook geen kleur kan kiezen.`,
    },
    readonly: {
      type: Boolean,
      default: false,
      docs: `Optie of je de kleur kan aanpassen.`,
    },
  },
  computed: {
    source () {
      return this.schema.options.map(color => ({
        id: color.key,
        hexColor: '#' + (color.value | 0x1000000).toString(16).substr(1),
        displayName: color.displayName || color.key,
      }));
    },
  },
  components: {
    // eslint-disable-next-line vue/no-unused-components
    colorPickerItem,
    relationPicker,
  },
};
</script>
