<?php
/**
 * Plumrocket Inc.
 *
 * NOTICE OF LICENSE
 *
 * This source file is subject to the End-user License Agreement
 * that is available through the world-wide-web at this URL:
 * http://wiki.plumrocket.net/wiki/EULA
 * If you are unable to obtain it through the world-wide-web, please
 * send an email to support@plumrocket.com so we can send you a copy immediately.
 *
 * @package     Plumrocket_Base
 * @copyright   Copyright (c) 2020 Plumrocket Inc. (http://www.plumrocket.com)
 * @license     http://wiki.plumrocket.net/wiki/EULA  End-user License Agreement
 */
?>
<?php /** @var \Magento\Backend\Block\Template $block */ ?>
<script type="text/javascript">
    require(['pickr'], function(Pickr) {
        var input = document.getElementById('<?= $block->escapeHtml($block->getData('elementId')) ?>');

        var pickr = Pickr.create({
            el: '#<?= $block->escapeHtml($block->getData('pickerId')) ?>',
            theme: 'monolith',
            useAsButton: false,
            disabled: '<?= /* @noEscape */ $block->getData('disabled') ?>',
            default: '<?= /* @noEscape */ $block->getData('currentValue') ?>' ? '<?= /* @noEscape */ $block->getData('currentValue') ?>' : null,
            comparison: false,
            swatches: [
                'rgba(244, 67, 54, 1)',
                'rgba(233, 30, 99, 0.95)',
                'rgba(156, 39, 176, 0.9)',
                'rgba(103, 58, 183, 0.85)',
                'rgba(63, 81, 181, 0.8)',
                'rgba(33, 150, 243, 0.75)',
                'rgba(3, 169, 244, 0.7)',
                'rgba(0, 188, 212, 0.7)',
                'rgba(0, 150, 136, 0.75)',
                'rgba(76, 175, 80, 0.8)',
                'rgba(139, 195, 74, 0.85)',
                'rgba(205, 220, 57, 0.9)',
                'rgba(255, 235, 59, 0.95)',
                'rgba(255, 193, 7, 1)'
            ],

            components: {

                // Main components
                preview: true,
                opacity: true,
                hue: true,

                // Input / output Options
                interaction: {
                    hex: true,
                    rgba: true,
                    hsla: false,
                    hsva: false,
                    cmyk: false,
                    input: true,
                    clear: true,
                    save: false
                }
            }
        });

        pickr.on('change', function (color, instance) {
            if (null === color) {
                input.value = '';
            } else {
                input.value = color.toHEXA();
            }
        });

        pickr.on('clear', function (instance) {
            input.value = '';
        });

        input.addEventListener('change', function (ev) {
            if (ev.target.value === '') {
                pickr.setColor(null);
            } else {
                pickr.setColor(ev.target.value);
            }
        });
    });
</script>
