<template>
  <v-row
    class="px-1"
    no-gutters
    justify="space-between"
    style="width: 100%"
  >
    <v-select
      class="pt-0 mt-0"
      :value="pattern"
      :items="Object.keys(patternList)"
      background-color="white"
      hide-details
      required
      light
      @input="updatePattern"
    >
      <template v-slot:selection="{item}">
        <div
          v-if="item !== 'None'"
          :title="item"
          style="width: 100%; height: 16px;"
          :style="{background: '5px no-repeat url(' + patternList[item] + ')'}"
        />
        <div
          v-else
          class="ml-2"
        >
          None
        </div>
      </template>
      <template v-slot:item="{item}">
        <div
          v-if="item !== 'None'"
          :title="item"
          style="width: 100%; height: 16px;"
          :style="{background: '5px no-repeat url(' + patternList[item] + ')'}"
        />
        {{ item === 'None' ? 'None' : '' }}
      </template>
      <template v-slot:append-outer>
        <v-menu
          transition="scale-transition"
          :close-on-content-click="false"
          offset-x
        >
          <template v-slot:activator="{ on }">
            <v-badge
              class="eyedropper-badge mr-1"
              icon="mdi-eyedropper"
              bottom
              overlap
              :bordered="isEyeDropperActive"
              @click.native="setEyeDropperEnabled(!isEyeDropperActive)"
            >
              <v-btn
                ref="eyeButton"
                :color="colorInfo.rgb"
                retain-focus-on-click
                fab
                height="25"
                width="25"
                @click.native.stop
                v-on="on"
              />
            </v-badge>
          </template>
          <v-color-picker
            :value="colorInfo.rgba"
            :swatches="SWATCHES"
            show-swatches
            @input="updateColor"
          />
        </v-menu>
      </template>
    </v-select>
  </v-row>
</template>

<script>
import Vuetify, {VRow, VBtn, VMenu, VBadge, VColorPicker} from 'vuetify/lib';
import {RgbaColor} from '@int/geotoolkit/util/RgbaColor';

const SWATCHES = [
    ['#FF0000', '#AA0000', '#550000'],
    ['#FFFF00', '#AAAA00', '#555500'],
    ['#00FF00', '#00AA00', '#005500'],
    ['#00FFFF', '#00AAAA', '#005555'],
    ['#0000FF', '#0000AA', '#000055']
];

export default {
    name: 'ColorInput',
    components: {VRow, VBtn, VMenu, VBadge, VColorPicker},
    props: {
        name: {
            type: String,
            default: ''
        },
        color: {
            type: String,
            default: '#000000'
        },
        pattern: {
            type: String,
            default: ''
        },
        patternList: {
            type: Object,
            default: function () {
                return null;
            }
        }
    },
    data () {
        return {
            isEyeDropperActive: false,
            SWATCHES
        };
    },
    computed: {
        colorInfo: function () {
            const rgba = new RgbaColor(this.color);
            return {
                rgb: rgba.toHex(),
                rgba: rgba.toHex(true)
            };
        }
    },
    mounted: function () {
        this._onKeyDown = this.setEyeDropperEnabled.bind(this, false);
        window.addEventListener('keydown', this._onKeyDown);
    },
    destroyed: function () {
        this.setEyeDropperEnabled(false);
        window.removeEventListener('keydown', this._onKeyDown);
    },
    methods: {
        updateColor (color) {
            this.$emit('changed', color, this.pattern);
        },
        updatePattern (value) {
            this.$emit('changed', this.colorInfo.rgba, value);
        },
        isActive () {
            return this.isEyeDropperActive;
        },
        setEyeDropperEnabled (value) {
            if (this.isEyeDropperActive === value) return;
            this.isEyeDropperActive = value;
            this.$emit('eyedropper-changed', this, value);
        }
    }
};
</script>
<style scoped>
    .eyedropper-badge >>> i.mdi-eyedropper {
        color: white !important;
        cursor: pointer;
    }
    .v-badge.eyedropper-badge >>> .v-badge__badge:after {
            border-color: red;
    }
</style>
