import * as React from 'react';
import { Block, HeaderBlock, SideNavSettings } from '../types';
import { Icon } from './ui/Icon';

const getFontFamilyValue = (font: SideNavSettings['fontFamily']) => {
    switch (font) {
        case 'serif': return 'serif';
        case 'mono': return 'monospace';
        case 'sans': default: return 'sans-serif';
    }
}

var EnterpriseNav: React.FC<{ blocks: Block[]; deviceView: 'pc' | 'mobile'; scrollContainerRef: React.RefObject<HTMLDivElement>, settings: SideNavSettings }> = function(props) {
    var blocks = props.blocks, deviceView = props.deviceView, scrollContainerRef = props.scrollContainerRef, settings = props.settings;
    var isNavOpenState = React.useState(false);
    var isNavOpen = isNavOpenState[0];
    var setIsNavOpen = isNavOpenState[1];
    
    var headers = blocks.filter(function(b) { return b.type === 'header'; }) as HeaderBlock[];

    var handleScrollTo = function(blockId: string) {
        if (scrollContainerRef.current) {
            var element = scrollContainerRef.current.querySelector('#block-' + blockId);
            if (element) {
                element.scrollIntoView({ behavior: 'smooth', block: 'start' });
            }
        }
        setIsNavOpen(false);
    };

    var handleBackToTop = function() {
        if (scrollContainerRef.current) {
            scrollContainerRef.current.scrollTo({ top: 0, behavior: 'smooth' });
        }
        setIsNavOpen(false);
    };

    var navLinks = [
        React.createElement(
          "button",
          {
            key: "back-to-top",
            onClick: handleBackToTop,
            className: "block w-full text-left p-2 rounded-md transition-colors font-semibold",
            style: { color: settings.textColor },
            onMouseOver: (e: any) => { e.currentTarget.style.backgroundColor = settings.hoverBackgroundColor; e.currentTarget.style.color = settings.hoverTextColor; },
            onMouseOut: (e: any) => { e.currentTarget.style.backgroundColor = 'transparent'; e.currentTarget.style.color = settings.textColor; },
          } as any,
          "↑ Back to Top"
        )
    ].concat(headers.map(function (header) {
        return React.createElement(
          "button",
          {
            key: header.id,
            onClick: function () { return handleScrollTo(header.id); },
            className: "block w-full text-left p-2 rounded-md transition-colors",
            style: { color: settings.textColor },
            onMouseOver: (e: any) => { e.currentTarget.style.backgroundColor = settings.hoverBackgroundColor; e.currentTarget.style.color = settings.hoverTextColor; },
            onMouseOut: (e: any) => { e.currentTarget.style.backgroundColor = 'transparent'; e.currentTarget.style.color = settings.textColor; },
          } as any,
          header.text
        );
      }));

    var navElement = React.createElement("nav", { className: "space-y-2" }, ...navLinks);

    if (deviceView === 'pc') {
        var navBackgroundStyle = settings.navBackgroundStyle || 'compact';
        var asideStyle: React.CSSProperties = {
            fontFamily: getFontFamilyValue(settings.fontFamily),
            fontSize: settings.fontSize,
        };
        var asideClasses = "p-4";
        if (navBackgroundStyle === 'compact') {
            asideClasses += ' rounded-lg';
            asideStyle.backgroundColor = settings.backgroundColor;
        }
        return React.createElement("aside", {
            className: asideClasses,
            style: asideStyle
        }, navElement);
    }
    
    var mobileNavContent = React.createElement("div", { className: "p-4" }, navElement);

    return React.createElement(React.Fragment, null,
        React.createElement("button", { onClick: function() { return setIsNavOpen(true); }, className: "absolute top-4 left-4 z-30 p-2 bg-black/50 rounded-full" } as any,
             React.createElement(Icon, { className: "h-6 w-6 text-white", children: React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M4 6h16M4 12h16M4 18h16" }) })
        ),
        isNavOpen && React.createElement("div", { className: "absolute inset-0 bg-black/50 z-40", onClick: function() { return setIsNavOpen(false); } } as any),
        React.createElement("div", { className: "absolute top-0 left-0 h-full w-64 bg-white dark:bg-gray-800 shadow-lg z-50 transition-transform duration-300 " + (isNavOpen ? "translate-x-0" : "-translate-x-full") } as any, mobileNavContent)
    );
};

export default EnterpriseNav;