// ═══════════════════════════════════════════════════════════════════
//  Neon Layout Components
// ═══════════════════════════════════════════════════════════════════
//
//  Convenience wrappers alrededor de VerticalLayout / HorizontalLayout
//  que conectan automáticamente con los tokens del tema para
//  spacing, padding y alignment consistentes.
//
//  Inspirado por adabraka-ui (VStack, HStack, Container, Spacer).
//
// ═══════════════════════════════════════════════════════════════════

import { Theme } from "../theme.slint";

// ── NeonVStack (Vertical Stack) ─────────────────────────────────
// Reemplaza escribir VerticalLayout cada vez con defaults del tema.
//
// Uso:
//   NeonVStack { spacing: Theme.sp-4;
//       NeonButton { text: "Save"; }
//       NeonButton { text: "Cancel"; }
//   }
//
export component NeonVStack {
    in property <length> spacing: Theme.sp-3;
    in property <length> pad: 0px;
    in property <length> pad-left: 0px;
    in property <length> pad-right: 0px;
    in property <length> pad-top: 0px;
    in property <length> pad-bottom: 0px;
    in property <string> alignment: "stretch"; // start, center, end, stretch
    in property <bool> fill-width: false;
    in property <bool> fill-height: false;

    Rectangle {
        width: 100%;
        height: root.fill-height ? 100% : 100%;
        VerticalLayout {
            spacing: root.spacing;
            padding-left: root.pad + root.pad-left;
            padding-right: root.pad + root.pad-right;
            padding-top: root.pad + root.pad-top;
            padding-bottom: root.pad + root.pad-bottom;
            alignment: root.alignment == "center" ? LayoutAlignment.center :
                       root.alignment == "start" ? LayoutAlignment.start :
                       root.alignment == "end" ? LayoutAlignment.end :
                       LayoutAlignment.stretch;
            @children
        }
    }
}

// ── NeonHStack (Horizontal Stack) ───────────────────────────────
// Reemplaza escribir HorizontalLayout cada vez.
//
// Uso:
//   NeonHStack { spacing: Theme.sp-2; alignment: "center";
//       IconHome { }
//       Text { text: "Home"; }
//   }
//
export component NeonHStack {
    in property <length> spacing: Theme.sp-3;
    in property <length> pad: 0px;
    in property <length> pad-left: 0px;
    in property <length> pad-right: 0px;
    in property <length> pad-top: 0px;
    in property <length> pad-bottom: 0px;
    in property <string> alignment: "center"; // start, center, end, stretch
    in property <string> justify: "start"; // start, center, end, space-between
    in property <bool> fill-width: false;

    property <string> effective-justify: root.justify;

    Rectangle {
        width: root.fill-width ? 100% : 100%;
        HorizontalLayout {
            spacing: root.spacing;
            padding-left: root.pad + root.pad-left;
            padding-right: root.pad + root.pad-right;
            padding-top: root.pad + root.pad-top;
            padding-bottom: root.pad + root.pad-bottom;
            alignment: root.alignment == "center" ? LayoutAlignment.center :
                       root.alignment == "start" ? LayoutAlignment.start :
                       root.alignment == "end" ? LayoutAlignment.end :
                       root.alignment == "space-between" ? LayoutAlignment.space-between :
                       LayoutAlignment.stretch;
            @children
        }
    }
}

// ── NeonContainer (Centered Container) ─────────────────────────
// Layout centrado con max-width, estilo adabraka-ui Container.
//
// Uso:
//   NeonContainer::sm() { Text { text: "Centered content"; } }
//   NeonContainer { max-width: 800px; Text { text: "Custom"; } }
//
export component NeonContainer {
    in property <length> max-w: 1024px;
    in property <length> pad-x: Theme.sp-6;
    in property <length> pad-y: Theme.sp-6;

    // Presets
    in property <bool> sm: false;   // 640px
    in property <bool> md: false;   // 768px
    in property <bool> lg: false;   // 1024px
    in property <bool> xl: false;   // 1280px

    property <length> effective-max: root.sm ? 640px : root.md ? 768px :
                                     root.lg ? 1024px : root.xl ? 1280px : root.max-w;

    HorizontalLayout {
        horizontal-stretch: 1;
        alignment: center;
        Rectangle {
            max-width: root.effective-max;
            VerticalLayout {
                padding-left: root.pad-x;
                padding-right: root.pad-x;
                padding-top: root.pad-y;
                padding-bottom: root.pad-y;
                @children
            }
        }
    }
}

// ── NeonSpacer ──────────────────────────────────────────────────
// Espacio flexible que se expande para ocupar el espacio disponible.
// Inspirado en el Spacer de adabraka-ui y el <div style="flex: 1">.
//
// Uso:
//   NeonHStack {
//       IconHome { }
//       NeonSpacer { }  // empuja todo después a la derecha
//       IconSettings { }
//   }
//
export component NeonSpacer {
    Rectangle {
        horizontal-stretch: 1;
        vertical-stretch: 1;
    }
}

// ── NeonDivider (Separator) ─────────────────────────────────────
// Línea divisoria horizontal o vertical. Inspirado en Separator
// de adabraka-ui.
//
// Uso:
//   NeonDivider { }
//   NeonDivider { orientation: "vertical"; height: 100%; }
//
export component NeonDivider {
    in property <string> orientation: "horizontal"; // horizontal, vertical
    in property <length> thickness: 1px;
    in property <color> color: Theme.border;

    if (root.orientation == "horizontal") : Rectangle {
        height: root.thickness;
        width: 100%;
        background: root.color;
    }
    if (root.orientation == "vertical") : Rectangle {
        width: root.thickness;
        height: 100%;
        background: root.color;
    }
}
