#include "library.h"
#include "clay.h"

bool static sidebar_open = true;

Clay_Color const SIDEBAR_COLOR = {80.f, 80.f, 80.f, 255.f};

Clay_LayoutConfig const SIDEBAR_LAYOUT = {
    .sizing={
        .height=CLAY_SIZING_GROW(),
        .width=CLAY_SIZING_FIXED(400)
    },
    .layoutDirection=CLAY_TOP_TO_BOTTOM
};

Clay_RectangleElementConfig const SIDEBAR_RECTANGLE = {
    .color=SIDEBAR_COLOR,
};

static
void render_composit_library_sidebar() {
    if(sidebar_open) {
        CLAY(CLAY_ID("Sidebar"),
            CLAY_LAYOUT(SIDEBAR_LAYOUT),
            CLAY_RECTANGLE(SIDEBAR_RECTANGLE)
        ) {
            CLAY(CLAY_ID("SidebarTab"),
                CLAY_FLOATING({
                    .attachment={
                        .element=CLAY_ATTACH_POINT_LEFT_TOP,
                        .parent=CLAY_ATTACH_POINT_RIGHT_TOP
                    }
                }),
                CLAY_LAYOUT({
                    .sizing={.width=CLAY_SIZING_FIXED(20), .height=CLAY_SIZING_FIXED(50)},
                }),
                CLAY_RECTANGLE({
                    .color=SIDEBAR_COLOR,
                    .cornerRadius={
                        .topRight=6,
                        .bottomRight=6,
                        .topLeft=0,
                        .bottomLeft=0
                    }
                })
            ) {
            }
        }
    } else {
        CLAY(CLAY_ID("SidebarTab"),
            CLAY_FLOATING({
                .attachment={
                    .element=CLAY_ATTACH_POINT_LEFT_TOP,
                    .parent=CLAY_ATTACH_POINT_LEFT_TOP
                }
            }),
            CLAY_RECTANGLE({
                .color=SIDEBAR_COLOR
            })
        ) {}
    }
}

static
void render_composit_library_content() {
    CLAY(CLAY_ID("Content")) {
    }
}

void render_composit_library() {
    render_composit_library_sidebar();
    render_composit_library_content();
}
