/**
 * A basic component that changes background color, with considerations for opacity
 * support (checkered background image and IE8 support).
 */
Ext.define('Ext.ux.colorpick.ColorPreview', {
    extend: 'Ext.Component',
    alias: 'widget.colorpickercolorpreview',
 
    requires: [
        'Ext.util.Format',
        'Ext.XTemplate'
    ],
 
    // hack to solve issue with IE, when applying a filter the click listener is not being fired.
    style: 'position: relative',
 
    /* eslint-disable max-len */
    html: '<div class="' + Ext.baseCSSPrefix + 'colorpreview-filter" style="height:100%; width:100%; position: absolute;"></div>' +
          '<a class="btn" style="height:100%; width:100%; position: absolute;"></a>',
    /* eslint-enable max-len */
    // eo hack
 
    cls: Ext.baseCSSPrefix + 'colorpreview',
 
    height: 256,
 
    onRender: function() {
        var me = this;
 
        me.callParent(arguments);
 
        me.mon(me.el.down('.btn'), 'click', me.onClick, me);
    },
 
    onClick: function() {
        this.fireEvent('click', this, this.color);
    },
 
    // Called via databinding - update background color whenever ViewModel changes
    setColor: function(color) {
        var me = this,
            el = me.getEl();
 
        // Too early in rendering cycle; skip
        if (!el) {
            return;
        }
 
        me.color = color;
 
        me.applyBgStyle(color);
    },
 
    bgStyleTpl: Ext.create(
        'Ext.XTemplate',
        Ext.isIE && Ext.ieVersion < 10
            // eslint-disable-next-line max-len
            ? 'filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=\'#{hexAlpha}{hex}\', endColorstr=\'#{hexAlpha}{hex}\');' /* IE6-9 */
            : 'background: {rgba};'
    ),
 
    applyBgStyle: function(color) {
        var me = this,
            colorUtils = Ext.ux.colorpick.ColorUtils,
            filterSelector = '.' + Ext.baseCSSPrefix + 'colorpreview-filter',
            el = me.getEl().down(filterSelector),
            hex, alpha, rgba, bgStyle;
 
        hex = colorUtils.rgb2hex(color.r, color.g, color.b);
        alpha = Ext.util.Format.hex(Math.floor(color.a * 255), 2);
        rgba = colorUtils.getRGBAString(color);
        bgStyle = this.bgStyleTpl.apply({ hex: hex, hexAlpha: alpha, rgba: rgba });
 
        el.applyStyles(bgStyle);
    }
});