import json
from .folium_injections import FoliumCSSAndJavaScript


def color_bar(colorbar_ticks, fontsize='16px', scale=1):
    return FoliumCSSAndJavaScript(code="""
jQuery.prototype.colorbar_legend = function(colormap, smooth) {{
    $(this).html('')
    var colormap_ = {{}}
    for (var idx in colormap) {{
        colormap_[parseFloat(idx)] = colormap[idx];
    }}
    colormap = colormap_

    var colors_div =  $('<div class="colors"></div>');
    var tick_locations = Object.keys(colormap).map(parseFloat);
    tick_locations.sort();
    tick_locations.reverse();
    var previous = undefined;
    var color_style = (
        'linear-gradient(' +
        tick_locations.map(function(tick) {{
            var prepend = '';
            if (!smooth)
                prepend = previous ? previous + ' ' + (100 * (1-tick) + 0.001) + '%, ' : '';
        previous = colormap[tick].color;
        return (
            prepend + colormap[tick].color + ' ' + (100 * (1-tick)) + '%'
        );
        }}).join(', ') + ')'
    );
    colors_div.css('background-image', color_style);
    $(this).append(colors_div);

    for(var i in tick_locations) {{
        var tick = tick_locations[i];
        var top = tick == 0 ? 'calc(100% - 1px)' : (100 * (1-tick)) + '%';
        if ('value' in colormap[tick]) {{
            var label = $('<div class="label">' + colormap[tick].value + '</div>');
            label.css('top', top);
            label.css('left', '130%');

            var tick_ = $('<div class="tick"></div>');
            tick_.css('top', top);
            $(this).append(tick_);
    
            // label.css('width', '100%');
            $(this).append(label);
        }}
        
    }}
}};

var color_to_rgba = function(color) {{
    var rgba = $('div').css('color', color).css('color');
    rgba = rgba.replace('rgb(', '').replace('rgba(', '').replace(')', '').split(',').map(parseFloat);
    if (rgba.length < 4) // jquery's color sometimes does not return an alpha if it is 1.
        rgba.push(1);
    return rgba;
}};

var colormap = function(start, end) {{
    return (function(start, end, value) {{
        var value = Math.max(0, Math.min(value, 1));
        return (
            'rgba(' + [0, 1, 2, 3].map(
                i => start[i] + value * (end[i] - start[i])
            ).join(',') + ')');
    }}).bind(null, color_to_rgba(start), color_to_rgba(end))
}};

$(function() {{
    var legend = $('<div class="colorbar"></div>');
    $('body').append(legend);

    legend.colorbar_legend({colorbar_ticks}, true);
}});
""".format(colorbar_ticks=json.dumps(colorbar_ticks)), style="""
table.leaflet-filter-table td {{ padding-left: 10px; padding-right: 10px; border-bottom: 5px;}}

table.leaflet-filter-table label {{ display: inline-block; min-width: 50px; }}

.colorbar {{
  width: calc({scale} * 25px);
  position: relative;
  background-color: rgba(255, 255, 255, 1);
  position: fixed;
  top: calc(50px * {scale});
  width: calc(20px * {scale});
  left: calc(5px * {scale});
  height: calc(100% - {scale} * 100px);
  z-index: 1000;
}}

.colorbar .colors {{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0; left:0;
  background-color: rgba(255, 255, 255, 1);
}}

.colorbar .tick {{
  left: 100%;
  position: absolute;
  width: 20%;
  border-style: solid;
  border-color: black;
  border-width: {scale}px 0 0 0;
  height: 10px;
}}

.colorbar .label {{
  border-radius: calc({fontsize} / 4);
  background-color: #fff;
  color: #000;
  left:130%;
  position: absolute;
  border: 0;
  height: {fontsize};
  margin-top: calc({fontsize} / -2);
  line-height: {fontsize};
  vertical-align: middle;
  font-size: {fontsize};
  padding: 0px 3px;
  font-family: Garamond;
}}""".format(fontsize=fontsize, scale=scale))