from jp_doodle import color_chooser
from ipywidgets import HTML, Layout, VBox

html = HTML('<h1 style="background-color:#67f">Please change my background</h1>')

def change_html(color_array, html_color):
    html.value = '<h1 style="background-color:%s">Thanks! Change it again!</h1>' % html_color

cc = color_chooser.chooser(side=200, callback=change_html)
VBox([cc, html])

cc.html_color, cc.color_array

cc.reset_color_choice()

from jp_doodle import dual_canvas
from IPython.display import display

color_chooser2 = dual_canvas.SnapshotCanvas("color_chooser2.png", width=600, height=400)
color_chooser2.display_all()

color_chooser2.js_init("""

// Draw some named elements on the canvas.
// A filled yellow circle (disk) named "Colonel Mustard
element.circle({name: "Colonel Mustard", x:100, y:150, r:90, color:"yellow"});

// A filled red rectangle named "Miss Scarlett"
element.rect({name: "Miss Scarlett", x:100, y:130, w:100, h:20, color: "red"});

// An unfilled white circle named "Mrs. White"
element.circle({
    name: "Mrs. White", x:100, y:150, r:58, fill:false, 
    color:"white", lineWidth: 14});
    
// An unfilled blue rectangle named Mrs. Peacock
element.rect({
    name: "Mrs. Peacock", x:40, y:110, w:100, h:20,
    color: "blue", lineWidth: 10, degrees:70, fill:false});

// A line segment named "Professor Plum".
element.line({
    name: "Professor Plum", x1:190, y1:100, x2:10, y2:200,
    color:"purple", lineWidth: 20})
    
// A brown filled polygon (triangle) named Micky
element.polygon({
    name: "Micky",
    points: [[210, 10], [210, 110], [290, 60]],
    color: "brown",
})

// A green polyline named Mr. Green
element.polygon({
    name: "Mr. Green", fill:false, close:false, color: "green",
    lineWidth: 14, points: [[210, 10], [210, 110], [290, 60]]
})

// A magenta text string display named Pluto
element.text({
    name: "Pluto", text: "The Republic", font: "20px Arial",
    x: 20, y:20, degrees: 5, color:"magenta"
})

// Position a color chooser on the canvas.
var chosen_color = null;

element.color_chooser({
    x: 310, y: 50, side:200, font: "normal 7px Arial",
    callback: function(color_array, color_string) { chosen_color = color_string; }
});

// mouse tracker circle (initially hidden)
var tracker = element.circle({
    name:"mouse_track", r:5,
    events: false,  // This object is invisible to events.
    x:0, y:0, color:"black", hide:true});
    
element.text({
    x:10, y:-10, name: "explanation",
    text: "Choose a color then click an object to change its color",
})

// Center and scale the figure to fit in the available area.
element.fit(null, 20)

var on_mouse_move = function(event) {
    var name = event.canvas_name;
    var location = element.event_model_location(event);
    if ((chosen_color) && (name) && (location.x < 310)) {
        tracker.change(
            {hide:false, x:location.x, y:location.y, color:chosen_color});
        // on click change the color of the named object
        if (event.type == "click") {
            element.transition(name, {color: chosen_color});
        }
    } else {
        tracker.change({hide: true});
    }
};
element.on_canvas_event("mousemove", on_mouse_move);
element.on_canvas_event("click", on_mouse_move);

""")

popup = dual_canvas.DualCanvasWidget(width=300, height=300)
display(popup)
txt = popup.text(x=0, y=0, text="Click to color me", color="red", background="blue", name=True)

def change_foreground(array, color):
    txt.change(color=color)

def change_background(array, color):
    txt.change(background=background)
    
popup.js_init("""

var colorizer = $("<div/>");

colorizer.appendTo(element);

colorizer.dialog({
        autoOpen: false,
        resizable: true
});

colorizer.dual_canvas_helper({width:100, height:100});
colorizer.color_chooser({
    x: 0, y: 0, side:200, font: "normal 7px Arial",
    callback: change_foreground
});
colorizer.fit();

element.show_chooser = function() {
    colorizer.dialog("open");
};
""", change_foreground=change_foreground, change_background=change_background)

txt.on("click", popup.element.show_chooser)

popup.fit()