use yew::prelude::*;

use crate::canvas::{CanvasComp,Line,Sketch};
use crate::toolbox::ToolboxComp;

#[function_component]
pub fn DrawApp() -> Html {
    let sketch_handle = use_state(|| Sketch{ lines: vec![] });
    let sketch = (*sketch_handle).clone();
    
    let color_handle = use_state(|| String::from("#ffffff"));
    let color = (*color_handle).clone();

    let on_changecolor = Callback::from(move | color: String | {
	color_handle.set(color);
    });

    let on_clearcanvas = {
	let sketch_handle = sketch_handle.clone();
	Callback::from(move | _: () | {
	    sketch_handle.set(Sketch { lines: vec![] });
	})
    };

    let on_newline = Callback::from(move | line: Line | {
	let mut s = (*sketch_handle).clone();
	s.lines.push(line);
	sketch_handle.set(s);
    });
    
    html! {
        <div class="drawApp">
	    <ToolboxComp {on_changecolor} {on_clearcanvas}
	       color={color.clone()} />
	    
	    <div>
	      <CanvasComp width=1024 height=1024
                {sketch} {on_newline}
	        color={color.clone()} />
              <span class="footer">{"LJ Sketch"}</span>
	    </div>
        </div>
    }
}