import _ from 'underscore';

import LayoutHeaderUserView from 'girder/views/layout/HeaderUserView';
import router from 'girder/router';
import SearchFieldWidget from 'girder/views/widgets/SearchFieldWidget';
import View from 'girder/views/View';

import LayoutHeaderTemplate from 'girder/templates/layout/layoutHeader.pug';

import 'girder/stylesheets/layout/header.styl';

/**
 * This view shows the header in the layout.
 */
var LayoutHeaderView = View.extend({
    events: {
        'click .g-app-title': function () {
            router.navigate('', {trigger: true});
        }
    },

    initialize: function (settings) {
        this.brandName = settings.brandName || 'Girder';
        this.bannerColor = settings.bannerColor || '#3F3B3B';
        this.userView = new LayoutHeaderUserView({
            parentView: this
        });

        this.searchWidget = new SearchFieldWidget({
            placeholder: 'Quick search...',
            types: ['item', 'folder', 'group', 'collection', 'user'],
            parentView: this
        }).on('g:resultClicked', function (result) {
            this.searchWidget.resetState();
            router.navigate(result.type + '/' + result.id, {
                trigger: true
            });
        }, this);
    },

    render: function () {
        var textColor = this._getTextColor(this.bannerColor);
        this.$el.html(LayoutHeaderTemplate({
            brandName: this.brandName,
            bannerColor: this.bannerColor,
            textColor: textColor
        }));
        this.userView.setElement(this.$('.g-current-user-wrapper')).render();
        if (textColor !== '#ffffff') {
            // We will lose the hover color by setting this, so only do that if necessary
            this.userView.$('.g-user-text a').css('color', textColor);
        }
        this.searchWidget.setElement(this.$('.g-quick-search-container')).render();

        return this;
    },

    _getTextColor: function (bannerColor) {
        const red = parseInt(bannerColor.substr(1, 2), 16);
        const green = parseInt(bannerColor.substr(3, 2), 16);
        const blue = parseInt(bannerColor.substr(5, 2), 16);
        const colorArray = _.map([red, green, blue], (component) => {
            component = component / 255.0;
            if (component <= 0.03928) {
                component = component / 12.92;
            } else {
                component = Math.pow((component + 0.055) / 1.055, 2.4);
            }
            return component;
        });
        const L = 0.2126 * colorArray[0] + 0.7152 * colorArray[1] + 0.0722 * colorArray[2];
        return ((L + 0.05) / (0.0 + 0.05) > (1.0 + 0.05) / (L + 0.05)) ? '#000000' : '#ffffff';
    }
});

export default LayoutHeaderView;

@@ -1961,24 +1961,71 @@
 nerColor) %7B%0A
+        // https://stackoverflow.com/a/3943023%0A
         cons
@@ -2030,23 +2030,17 @@
 nst 
-r
+hexR
 ed = 
-parseInt(
 bann
@@ -2055,29 +2055,24 @@
 substr(1, 2)
-, 16)
 ;%0A        co
@@ -2079,25 +2079,19 @@
 nst 
-g
+hexG
 reen = 
-parseInt(
 bann
@@ -2106,29 +2106,24 @@
 substr(3, 2)
-, 16)
 ;%0A        co
@@ -2130,24 +2130,18 @@
 nst 
-b
+hexB
 lue = 
-parseInt(
 bann
@@ -2164,13 +2164,8 @@
 , 2)
-, 16)
 ;%0A  
@@ -2180,49 +2180,55 @@
 nst 
-colorArray = _.map(%5Bred, g
+sRGB = _.map(%5BhexRed, hexG
 reen, 
-b
+hexB
 lue%5D, (
-c
+hexC
 ompo
@@ -2235,18 +2235,16 @@
 nent) =%3E
- %7B
 %0A       
@@ -2248,37 +2248,37 @@
         
-component = c
+parseInt(hexC
 omponent
  / 255.0
@@ -2273,16 +2273,21 @@
 nent
+, 16)
  / 255.0
 ;%0A  
@@ -2282,30 +2282,36 @@
  / 255.0
-;
 %0A
+ 
     
+   );%0A
         
 if (comp
@@ -2302,18 +2302,72 @@
         
-if
+const linearRBG = _.map(sRGB, (component) =%3E%0A           
  (compon
@@ -2381,18 +2381,16 @@
 0.03928)
- %7B
 %0A       
@@ -2398,27 +2398,17 @@
         
-component =
+?
  compone
@@ -2417,17 +2417,16 @@
  / 12.92
-;
 %0A       
@@ -2434,44 +2434,13 @@
     
-%7D else %7B%0A                component =
+    :
  Mat
@@ -2478,17 +2478,16 @@
 55, 2.4)
-;
 %0A       
@@ -2491,53 +2491,8 @@
     
-    %7D%0A            return component;%0A        %7D
 );%0A 
@@ -2517,26 +2517,25 @@
 .2126 * 
-colorArray
+linearRBG
 %5B0%5D + 0.
@@ -2541,26 +2541,25 @@
 .7152 * 
-colorArray
+linearRBG
 %5B1%5D + 0.
@@ -2569,18 +2569,17 @@
 2 * 
-colorArray
+linearRBG
 %5B2%5D;
@@ -2653,20 +2653,44 @@
 05))
- ? '#000000'
+%0A            ? '#000000'%0A           
  : '

Refactor LayoutHeaderView._getTextColor