const DEFAULT_APP_STATE = {
    floor: 1,
    plan: new Array(GRID_SIZE_X * GRID_SIZE_Y).fill(0),
    // mouse_state can be “normal”, or “dnd”.
    mouse_state: "normal",
};

function genGrid(x_count, y_count, cell_size)
{
    let lines = [];
    for(let x = 0; x < x_count+1; x++)
    {
        lines.push(h("line", {
            "x1": x * cell_size + 0.5, "x2": x * cell_size + 0.5, "y1": 0.5,
            "y2": y_count * cell_size + 0.5,
        }));
    }
    for(let y = 0; y < y_count+1; y++)
    {
        lines.push(h("line", {
            "y1": y * cell_size + 0.5, "y2": y * cell_size + 0.5, "x1": 0.5,
            "x2": x_count * cell_size + 0.5,
        }));
    }
    return h("g", {"stroke": "black", "stroke-width": 1}, lines);
}

function AssetView({asset_index, on_drag_begin, on_drag_end})
{
    return h("div", {"class": "Asset", "draggable": true,
                     "data-asset-index": asset_index,
                     "ondragstart": on_drag_begin,
                     "ondragend": on_drag_end,},
             h("svg", ASSET_SVG_PROPS, ASSET_WHITE_BG,
               TILES[asset_index].inner_svg));
}

function AssetsView({on_drag_begin, on_drag_end})
{
    let views = TILES.slice(1).map((t, i) =>
        h(AssetView, {asset_index: i + 1, on_drag_begin: on_drag_begin,
                      on_drag_end: on_drag_end}));
    return h("div", {}, views);
}

function PlanGridView({content, mouse_state})
{
    const [mouse_coord, setMouseCoord] = preactHooks.useState(null);

    function onDragOver(e)
    {
        e.preventDefault();
        let b = e.target.getBoundingClientRect();
        let x = e.clientX - b.left;
        let y = e.clientY - b.top;
        setMouseCoord([x, y]);
    }

    function onDragLeave(e)
    {
        setMouseCoord(null);
    }

    let hilight_box = null;
    console.debug(mouse_coord);

    if(mouse_coord !== null && mouse_state != "dnd")
    {
        setMouseCoord(null);
    }

    if(mouse_coord !== null && mouse_state == "dnd")
    {
        let cell_x = Math.floor(mouse_coord[0] / (CELL_SIZE + 1));
        let cell_y = Math.floor(mouse_coord[1] / (CELL_SIZE + 1));
        hilight_box = h("rect", {
            "x": cell_x * (CELL_SIZE + 1) + 0.5, "y": cell_y * (CELL_SIZE + 1) + 0.5,
            "width": CELL_SIZE + 1, "height": CELL_SIZE + 1,
            "stroke": "#2ed573", "stroke-width": 3, "fill": "transparent"});
    }
    let grid_content = content.map((idx, i) => {
        if(idx == 0) return null;
        let cell_x = i % GRID_SIZE_X;
        let cell_y = Math.floor(i / GRID_SIZE_Y);
        return h("g", {"transform": `translate(${cell_x * (CELL_SIZE + 1) + 1} \
${cell_y * (CELL_SIZE + 1) + 1})`}, ASSET_WHITE_BG, TILES[idx].inner_svg);
    });

    let img_width = GRID_SIZE_X * (CELL_SIZE + 1) + 1;
    let img_height = GRID_SIZE_Y * (CELL_SIZE + 1) + 1;
    return h("svg", {"width": img_width, "height": img_height,
                     "version": "1.1", "ondragover": onDragOver,
                     "id": "Grid", "ondragleave": onDragLeave,},
             h("rect", {x: 0, y: 0, width: img_width, height: img_height,
                        fill: "#a4b0be", "stroke-width": 0}),
             grid_content, genGrid(GRID_SIZE_X, GRID_SIZE_Y, CELL_SIZE + 1),
             hilight_box);
}

function PlanView({plan, mouse_state})
{
    return h("div", {},
             h("p", {}, "The plan:"),
             h(PlanGridView, {content: plan, mouse_state: mouse_state}));
}

function App({initial_state})
{
    const [state, setState] = preactHooks.useState(initial_state);

    function onDragAssetBegin(e)
    {
        let new_state = structuredClone(state);
        new_state.mouse_state = "dnd";
        setState(new_state);
    }
    function onDragAssetEnd(e)
    {
        if(e.dragEffect === "none") return;
        let grid = document.getElementById("Grid");
        let b = grid.getBoundingClientRect();
        let x = e.clientX - b.left;
        let y = e.clientY - b.top;
        if(x < 0 || y < 0 || x > b.width || y > b.height) return;
        let cell_x = Math.floor(x / (CELL_SIZE + 1));
        let cell_y = Math.floor(y / (CELL_SIZE + 1));
        let cell_index = cell_y * GRID_SIZE_X + cell_x;
        let asset_index = parseInt(e.target.getAttribute("data-asset-index"));

        let new_state = structuredClone(state);
        new_state.plan[cell_index] = asset_index;
        new_state.mouse_state = "normal";
        setState(new_state);
    }

    function onClickSaveImg()
    {
        let grid_width = GRID_SIZE_X * (CELL_SIZE + 1) + 1;
        let grid_height = GRID_SIZE_Y * (CELL_SIZE + 1) + 1;
        let canvas = document.createElement('canvas');
        canvas.width = grid_width;
        canvas.height = grid_height;
        let context = canvas.getContext("2d");
        var svg_str = new XMLSerializer().serializeToString(
            document.getElementById("Grid"));
        var img = new Image();
        img.onload = function()
        {
            context.drawImage(this, 0, 0);
            // Open PNG image in new tab.
            var dataURL = canvas.toDataURL("image/png");
            var new_tab = window.open('about:blank', 'image from canvas');
            new_tab.document.write("<img src='" + dataURL + "' alt='from canvas'/>");
        }
        img.src = 'data:image/svg+xml; charset=utf8, ' +
            encodeURIComponent(svg_str);
    }

    return h("div", {},
             h(AssetsView, {on_drag_begin: onDragAssetBegin,
                            on_drag_end: onDragAssetEnd}),
             h(PlanView, {plan: state.plan, mouse_state: state.mouse_state}),
             h("div", {},
               h("a", {"href": "javascript:void(0);", onclick: onClickSaveImg},
                 "Open Image!")));
}

preact.render(h(App, {initial_state: DEFAULT_APP_STATE}),
              document.getElementById("Plan"));