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})
{
    return h("div", {"class": "Asset", "draggable": true,
                     "id": `Asset${asset_index}`},
             h("svg", ASSET_SVG_PROPS, ASSET_WHITE_BG,
               TILES[asset_index].inner_svg));
}

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

function PlanGridView({content})
{
    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;
    if(mouse_coord !== null)
    {
        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) => {
        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)} \
${cell_y * (CELL_SIZE + 1)})`}, TILES[idx]);
    });

    return h("svg", {"width": GRID_SIZE_X * (CELL_SIZE + 1) + 1,
                     "height": GRID_SIZE_Y * (CELL_SIZE + 1) + 1,
                     "version": "1.1", "ondragover": onDragOver,
                     "id": "Grid", "ondragleave": onDragLeave},
             grid_content, genGrid(GRID_SIZE_X, GRID_SIZE_Y, CELL_SIZE + 1),
             hilight_box);
}

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

function App(props)
{
    return h("div", {},
             h(AssetsView, {}),
             h(PlanView, {}));
}

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