import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React, { useState, useRef } from "react";
import { useBreakpoint } from "../../hooks";
import { useElementScroll } from "../../hooks/useElementScroll";
import { Button } from "../form-controls";
export const AppLayout = ({ navBarDrawer, leftDrawer, children, className = "", }) => {
    const { isMobile, isTablet } = useBreakpoint();
    const contentRef = useRef(null);
    const { scrollY, scrollDirection } = useElementScroll(contentRef);
    const [isMobileDrawerOpen, setIsMobileDrawerOpen] = useState(false);
    const [isNavbarVisible, setIsNavbarVisible] = useState(true);
    const isNavbarVisibleRef = useRef(isNavbarVisible);
    const shouldShowMobileDrawer = isMobile || isTablet;
    const shouldShowDesktopDrawer = !shouldShowMobileDrawer && leftDrawer;
    // Mantener el ref sincronizado con el estado
    React.useEffect(() => {
        isNavbarVisibleRef.current = isNavbarVisible;
    }, [isNavbarVisible]);
    // Controlar visibilidad del navbar basado en scroll
    React.useEffect(() => {
        let shouldBeVisible;
        if (scrollY < 100) {
            // Siempre mostrar navbar cerca del top
            shouldBeVisible = true;
        }
        else if (scrollDirection === "down" && scrollY > 100) {
            // Ocultar navbar al hacer scroll hacia abajo
            shouldBeVisible = false;
        }
        else if (scrollDirection === "up" && scrollY > 100) {
            // Mostrar navbar al hacer scroll hacia arriba
            shouldBeVisible = true;
        }
        else {
            // No cambiar el estado si scrollDirection es null o no se cumple ninguna condición
            return;
        }
        // Solo actualizar el estado si hay un cambio real
        if (shouldBeVisible !== isNavbarVisibleRef.current) {
            setIsNavbarVisible(shouldBeVisible);
        }
    }, [scrollDirection, scrollY]);
    const handleMobileDrawerToggle = () => {
        setIsMobileDrawerOpen(!isMobileDrawerOpen);
    };
    const handleOverlayClick = () => {
        setIsMobileDrawerOpen(false);
    };
    // Clases base del layout
    const layoutClasses = `
    flex flex-col h-screen w-full
    font-[var(--font-default)]
    ${className}
  `;
    // Clases del navbar
    const navbarClasses = `
    bg-[var(--color-bg-default)] border-b border-[var(--color-border-default)]
    z-[1000] fixed top-0 left-0 right-0
    transform transition-transform duration-300 ease-in-out
    ${isNavbarVisible ? "translate-y-0" : "-translate-y-full"}
  `;
    // Estilos inline para debug
    const navbarStyle = {
        transform: isNavbarVisible ? "translateY(0)" : "translateY(-100%)",
        transition: "transform 300ms ease-in-out",
    };
    const navbarContentClasses = `
    flex items-center pr-4 lg:px-4 h-16 gap-2
    md:px-3
  `;
    const navbarDrawerClasses = `flex-1`;
    // Clases del contenido principal
    const mainClasses = `
    flex flex-1 overflow-hidden
    transition-all duration-300 ease-in-out
    ${navBarDrawer && isNavbarVisible ? "pt-16" : ""}
  `;
    const leftDrawerClasses = `
    w-64 bg-[var(--color-bg-default)]
    overflow-y-auto flex-shrink-0 p-4
    transition-all duration-300 ease-in-out
    ${navBarDrawer && isNavbarVisible ? "pt-20" : "pt-4"}
  `;
    const contentClasses = `
    flex-1 overflow-y-auto px-2 py-4 lg:px-6
  `;
    // Clases del overlay móvil
    const overlayClasses = `
    fixed inset-0 bg-black/50 backdrop-blur-sm z-[1998]
  `;
    // Clases del drawer móvil
    const mobileDrawerBaseClasses = `
    fixed top-0 left-0 h-screen w-64 max-w-[80vw]
    bg-[var(--color-bg-default)] shadow-[var(--shadow-xl)]
    transform -translate-x-full transition-transform duration-300 ease-in-out
    z-[1999] flex flex-col
  `;
    const mobileDrawerOpenClasses = `translate-x-0`;
    const mobileDrawerContentClasses = `
    flex-1 overflow-y-auto p-4
  `;
    return (_jsxs("div", { className: layoutClasses, children: [navBarDrawer && (_jsx("nav", { className: navbarClasses, style: navbarStyle, children: _jsxs("div", { className: navbarContentClasses, children: [shouldShowMobileDrawer && leftDrawer && (_jsx(Button, { variant: "ghost", icon: "fa-bars", onClick: handleMobileDrawerToggle, "aria-label": "Abrir men\u00FA" })), _jsx("div", { className: navbarDrawerClasses, children: navBarDrawer })] }) })), _jsxs("div", { className: mainClasses, children: [shouldShowDesktopDrawer && (_jsx("aside", { className: leftDrawerClasses, children: leftDrawer })), _jsx("main", { ref: contentRef, className: contentClasses, children: children })] }), shouldShowMobileDrawer && leftDrawer && isMobileDrawerOpen && (_jsx("div", { className: overlayClasses, onClick: handleOverlayClick })), shouldShowMobileDrawer && leftDrawer && (_jsxs("aside", { className: `${mobileDrawerBaseClasses} ${isMobileDrawerOpen ? mobileDrawerOpenClasses : ""}`, children: [_jsx("div", { className: "text-right", children: _jsx(Button, { variant: "ghost", icon: "fa-times", onClick: handleMobileDrawerToggle, "aria-label": "Cerrar men\u00FA" }) }), _jsx("div", { className: mobileDrawerContentClasses, children: leftDrawer })] }))] }));
};
