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

export component NeonModal {
    in-out property <bool> open: false;
    in property <string> title: "";
    in property <length> modal-width: 480px;
    in property <bool> closable: true;
    callback closed;

    Rectangle {
        opacity: root.open ? 1.0 : 0.0;
        animate opacity { duration: AnimationPresets.fade-in; }
        background: root.open ? Theme.bg-overlay : transparent;
        touch := TouchArea { enabled: root.open; }
        HorizontalLayout { horizontal-stretch: 1; vertical-stretch: 1; alignment: center;
            Rectangle {
                opacity: root.open ? 1.0 : 0.0;
                animate opacity { duration: AnimationPresets.fade-in; }
                max-width: root.modal-width; background: Theme.bg-elevated; border-radius: Theme.radius-xl; border-width: 1px; border-color: Theme.border;
                VerticalLayout { spacing: 0;
                    Rectangle { min-height: 48px;
                        HorizontalLayout { padding-left: Theme.sp-5; padding-right: Theme.sp-4; alignment: start;
                            Text { text: root.title; color: Theme.text-primary; font-size: Theme.font-xl; font-weight: 700; horizontal-stretch: 1; vertical-alignment: center; }
                            if (root.closable) : TouchArea { width: 36px; height: 36px;
                                Rectangle { border-radius: Theme.radius-md; border-width: 1px; border-color: Theme.neon-cyan;
                                    Text { text: "×"; color: Theme.neon-cyan; font-size: Theme.font-lg; horizontal-alignment: center; vertical-alignment: center; }
                                } clicked => { root.open = false; root.closed(); }
                            }
                        }
                    }
                    Rectangle { height: 1px; background: Theme.border; }
                    Rectangle { vertical-stretch: 1;
                        VerticalLayout { padding: Theme.sp-5; spacing: Theme.sp-3; @children }
                    }
                }
            }
        }
    }
}

export component NeonDrawer {
    in-out property <bool> open: false;
    in property <string> title: "";
    in property <string> side: "right";
    in property <length> drawer-width: 360px;
    callback closed;

    Rectangle {
        opacity: root.open ? 1.0 : 0.0;
        animate opacity { duration: AnimationPresets.fade-in; }
        background: root.open ? Theme.bg-overlay : transparent;
        touch := TouchArea { enabled: root.open; }
        HorizontalLayout { horizontal-stretch: 1;
            if (root.side == "right") : Rectangle { horizontal-stretch: 1; TouchArea { clicked => { root.open = false; root.closed(); } } }
            Rectangle {
                width: root.open ? root.drawer-width : 0px;
                animate width { duration: AnimationPresets.slide-up; }
                clip: true;
                background: Theme.bg-elevated;
                Rectangle { width: root.side == "right" ? 1px : 0px; background: Theme.border; height: 100%; }
                Rectangle { width: root.drawer-width;
                    VerticalLayout { spacing: 0;
                        Rectangle { min-height: 48px;
                            HorizontalLayout { padding-left: Theme.sp-4; padding-right: Theme.sp-4; alignment: start;
                                Text { text: root.title; font-size: Theme.font-lg; font-weight: 700; color: Theme.text-primary; horizontal-stretch: 1; vertical-alignment: center; }
                                TouchArea { width: 36px; height: 36px;
                                    Rectangle { border-radius: Theme.radius-md;
                                        Text { text: "×"; color: Theme.text-muted; font-size: Theme.font-lg; horizontal-alignment: center; vertical-alignment: center; }
                                    } clicked => { root.open = false; root.closed(); }
                                }
                            }
                        }
                        Rectangle { height: 1px; background: Theme.border; }
                        Rectangle { vertical-stretch: 1;
                            VerticalLayout { padding: Theme.sp-4; spacing: Theme.sp-3; @children }
                        }
                    }
                }
            }
            if (root.side == "left") : Rectangle { horizontal-stretch: 1; TouchArea { clicked => { root.open = false; root.closed(); } } }
        }
    }
}

export component NeonConfirmDialog {
    in-out property <bool> open: false;
    in property <string> title: "";
    in property <string> message: "";
    in property <bool> confirm-danger: false;
    callback confirmed;
    callback cancelled;

    Rectangle {
        opacity: root.open ? 1.0 : 0.0;
        animate opacity { duration: AnimationPresets.fade-in; }
        background: root.open ? Theme.bg-overlay : transparent;
        touch := TouchArea { enabled: root.open; }
        HorizontalLayout { horizontal-stretch: 1; vertical-stretch: 1; alignment: center;
            Rectangle {
                opacity: root.open ? 1.0 : 0.0;
                animate opacity { duration: AnimationPresets.fade-in; }
                max-width: 420px; background: Theme.bg-elevated; border-radius: Theme.radius-xl; border-width: 1px; border-color: Theme.border;
                VerticalLayout { padding: Theme.sp-5; spacing: Theme.sp-4;
                    Text { text: root.title; color: Theme.text-primary; font-size: Theme.font-lg; font-weight: 700; }
                    Text { text: root.message; color: Theme.text-muted; font-size: Theme.font-base; wrap: word-wrap; }
                    HorizontalLayout { spacing: Theme.sp-2; alignment: end;
                        Rectangle { min-width: 80px; min-height: 36px; border-radius: Theme.radius-md; border-width: 1px; border-color: Theme.neon-cyan;
                            Text { text: "Cancel"; color: Theme.neon-cyan; font-size: Theme.font-base; horizontal-alignment: center; vertical-alignment: center; }
                            TouchArea { clicked => { root.open = false; root.cancelled(); } mouse-cursor: MouseCursor.pointer; }
                        }
                        Rectangle { min-width: 80px; min-height: 36px; border-radius: Theme.radius-md; background: root.confirm-danger ? Theme.neon-red : Theme.neon-cyan;
                            Text { text: root.confirm-danger ? "Delete" : "Confirm"; color: Theme.text-inverse; font-size: Theme.font-base; font-weight: 700; horizontal-alignment: center; vertical-alignment: center; }
                            TouchArea { clicked => { root.open = false; root.confirmed(); } mouse-cursor: MouseCursor.pointer; }
                        }
                    }
                }
            }
        }
    }
}
