<template>
  <div class="color-picker"></div>
</template>

<script>
// import Pickr from '/node_modules/@simonwep/pickr/dist/pickr.min';
import Pickr from '@simonwep/pickr';
import '@simonwep/pickr/dist/pickr.monolith.min.css';
// import '/node_modules/@simonwep/pickr/dist/pickr.monolith.min.css';

export default {
  name: 'EbColorPicker',
  data() {
    return {
      pickr: null
    };
  },
  methods: {
    loadPickr() {
      this.pickr = Pickr.create({
        // Selector or element which will be replaced with the actual color-picker.
        // Can be a HTMLElement.
        el: '.color-picker',

        // Which theme you want to use. Can be 'classic', 'monolith' or 'nano'
        theme: 'monolith',

        // Using the 'el' Element as button, won't replace it with the pickr-button.
        // If true, appendToBody will also be automatically true.
        useAsButton: false,

        // If true pickr won't be fixed and instead append after the in el resolved element.
        // Setting this to true will also set showAlways to true. It's possible to hide it via .hide() anyway.
        inline: true,

        // Defines the direction in which the knobs of hue and opacity can be moved.
        // 'v' => opacity- and hue-slider can both only moved vertically.
        // 'hv' => opacity-slider can be moved horizontally and hue-slider vertically.
        // Can be used to apply custom layouts
        sliders: 'v',

        // Start state. If true 'disabled' will be added to the button's classlist.
        disabled: false,

        // If set to false it would directly apply the selected color on the button and preview.
        comparison: true,

        // Default color
        default: 'fff',

        // Optional color swatches. null by default which means it's disabled.
        // Types are all these allowed which can be used in pickr e.g. hex, hsv(a), hsl(a), rgb(a), cmyk or a name like 'magenta'
        swatches: ['#F44336', '#E91E63', '#9C27B0', '#673AB7'],

        // Default color representation.
        // Valid options are `HEX`, `RGBA`, `HSVA`, `HSLA` and `CMYK`.
        defaultRepresentation: 'HEX',

        // Option to keep the color picker always visible. You can still hide / show it via
        // 'pickr.hide()' and 'pickr.show()'. The save button keeps his functionality, so if
        // you click it, it will fire the onSave event.
        showAlways: false,

        // Close pickr with this specific key.
        // Default is 'Escape'. Can be the event key or code.
        closeWithKey: 'Escape',

        // Defines the position of the color-picker.
        // Any combinations of top, left, bottom or right with one of these optional modifiers: start, middle, end
        // Examples: top-start / right-end
        // If clipping occurs, the color picker will automatically choose its position.
        position: 'bottom-middle',

        // Enables the ability to change numbers in an input field with the scroll-wheel.
        // To use it set the cursor on a position where a number is and scroll, use ctrl to make steps of five
        adjustableNumbers: true,

        // Show or hide specific components.
        // By default only the palette (and the save button) is visible.
        components: {
          // Defines if the palette itself should be visible.
          // Will be overwritten with true if preview, opacity or hue are true
          palette: true,

          preview: true, // Left side color comparison
          opacity: true, // Opacity slider
          hue: true, // Hue slider

          // Bottom interaction bar, theoretically you could use 'true' as propery.
          // But this would also hide the save-button.
          interaction: {
            hex: true, // hex option  (hexadecimal representation of the rgba value)
            rgba: true, // rgba option (red green blue and alpha)
            hsla: false, // hsla option (hue saturation lightness and alpha)
            hsva: false, // hsva option (hue saturation value and alpha)
            cmyk: false, // cmyk option (cyan mangenta yellow key )

            input: true, // input / output element
            clear: true, // Clear button
            save: true // Save button
          }
        },

        // Button strings, brings the possibility to use a language other than English.
        strings: {
          save: 'Save', // Default for save button
          clear: 'Clear' // Default for clear button
        }
      });

      this.pickr
        .on('init', (...args) => {
          console.log('init', args);
          this.$emit('init', args);
        })
        .on('save', (...args) => {
          console.log('save', args);
          this.$emit('save', args);
        })
        .on('change', (...args) => {
          console.log('change', args);
          this.$emit('change', args);
        })
        .on('swatchselect', (...args) => {
          console.log('swatchselect', args);
          this.$emit('swatchselect', args);
        });
    }
  },

  mounted() {
    this.loadPickr();
  }
};
</script>

<style scoped>
/* @import '/node_modules/@simonwep/pickr/dist/pickr.monolith.min.css'; */
</style>