use crate::Route;
use dioxus::prelude::*;

#[component]
pub fn BottomSheetMenu(show: bool, on_close: EventHandler<()>) -> Element {
    rsx! {
        // Overlay - positioned behind the menu
        if show {
            div {
                class: "bottom-sheet-overlay",
                onclick: move |_| on_close.call(()),
            }
        }

        // Menu Body
        div {
            class: format_args!(
                "bottom-sheet-menu {}",
                if show { "visible" } else { "hidden" }
            ),
            onclick: move |evt| {
                evt.stop_propagation();
            },

            // Menu Header
            div {
                class: "menu-header",
                label {
                    class: "flex items-center",
                    div {
                        class: "menu-handle"
                    }
                }
                p {
                    class: "menu-title",
                    "Menu"
                }
                button {
                    class: "menu-close",
                    onclick: move |_| on_close.call(()),
                    title: "Close",
                    div {
                        class: "menu-close-icon"
                    }
                }
            }

            // Menu Links
            div {
                class: "menu-links",
                Link {
                    class: "menu-link",
                    to: Route::Home{},
                    "Home"
                }
                Link {
                    class: "menu-link",
                    to: Route::Skills {},
                    "Skills"
                }
                Link {
                    class: "menu-link",
                    to: Route::Experiences{},
                    "Experiences"
                }
            }

            // Menu Contact
            div {
                class: "menu-contact",
                a {
                    class: "menu-contact-item",
                    href: "tel:+639",
                    svg {
                        class: "menu-contact-icon",
                        xmlns: "http://www.w3.org/2000/svg",
                        fill: "currentColor",
                        height: "24",
                        view_box: "0 0 24 24",
                        width: "24",
                        path {
                            d: "M0 0h24v24H0z",
                            fill: "none"
                        }
                        path {
                            d: "M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z"
                        }
                    }
                    span {
                        "Call"
                    }
                }
                a {
                    class: "menu-contact-item",
                    href: "mailto:portfolio.dc@sent.com",
                    svg {
                        class: "menu-contact-icon",
                        xmlns: "http://www.w3.org/2000/svg",
                        fill: "currentColor",
                        height: "24",
                        view_box: "0 0 24 24",
                        width: "24",
                        path {
                            d: "M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"
                        }
                        path {
                            d: "M0 0h24v24H0z",
                            fill: "none"
                        }
                    }
                    span {
                        "Email"
                    }
                }
            }
        }
    }
}

#[component]
pub fn QuickMenuButton(on_click: EventHandler<()>) -> Element {
    rsx! {
        button {
            class: "quick-menu-button",
            onclick: move |_| on_click.call(()),
            div {
                class: "quick-menu-hamburger",
                div {
                    class: "quick-menu-hamburger-line"
                }
            }
            "Quick Menu"
        }
    }
}
