import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { memo, useEffect } from 'react';
import { X } from 'lucide-react';
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
import { prism, vscDarkPlus, } from 'react-syntax-highlighter/dist/esm/styles/prism';
import { useFileBrowserStore } from '../../stores/fileBrowserStore';
import { useFileContent } from '../../hooks/useFileBrowser';
import { Button } from '../ui/Button';
const LANGUAGE_MAP = {
    js: 'javascript',
    jsx: 'jsx',
    ts: 'typescript',
    tsx: 'tsx',
    py: 'python',
    rb: 'ruby',
    go: 'go',
    rs: 'rust',
    java: 'java',
    c: 'c',
    cpp: 'cpp',
    h: 'c',
    hpp: 'cpp',
    cs: 'csharp',
    php: 'php',
    sh: 'bash',
    bash: 'bash',
    zsh: 'bash',
    sql: 'sql',
    json: 'json',
    yaml: 'yaml',
    yml: 'yaml',
    xml: 'xml',
    html: 'html',
    css: 'css',
    scss: 'scss',
    md: 'markdown',
    txt: 'plaintext',
    svelte: 'svelte',
    toml: 'toml',
    lock: 'plaintext',
};
function inferLanguage(path) {
    const ext = path.split('.').pop()?.toLowerCase() ?? '';
    return LANGUAGE_MAP[ext] ?? 'plaintext';
}
export const FileViewerPanel = memo(function FileViewerPanel() {
    const isViewerOpen = useFileBrowserStore((s) => s.isViewerOpen);
    const selectedFile = useFileBrowserStore((s) => s.selectedFile);
    const closeViewer = useFileBrowserStore((s) => s.closeViewer);
    const { data, isLoading } = useFileContent(selectedFile);
    useEffect(() => {
        const handleEscape = (e) => {
            const target = e.target;
            const isInInput = target.tagName === 'INPUT' ||
                target.tagName === 'TEXTAREA' ||
                target.isContentEditable;
            if ((e.key === 'Escape' || (e.key === 'q' && !isInInput)) &&
                isViewerOpen) {
                closeViewer();
            }
        };
        document.addEventListener('keydown', handleEscape);
        return () => document.removeEventListener('keydown', handleEscape);
    }, [isViewerOpen, closeViewer]);
    if (!isViewerOpen || !selectedFile)
        return null;
    const syntaxTheme = document?.documentElement.classList.contains('dark')
        ? vscDarkPlus
        : prism;
    const language = inferLanguage(selectedFile);
    return (_jsxs("div", { className: "absolute inset-0 bg-background z-50 flex flex-col animate-in slide-in-from-left duration-300", children: [_jsxs("div", { className: "h-14 border-b border-border px-4 flex items-center gap-3", children: [_jsx(Button, { variant: "ghost", size: "icon", onClick: closeViewer, title: "Close file viewer (ESC)", children: _jsx(X, { className: "w-4 h-4" }) }), _jsxs("div", { className: "flex-1 flex items-center gap-2 min-w-0", children: [_jsx("span", { className: "text-sm font-medium text-foreground font-mono truncate", title: selectedFile, children: selectedFile }), data && (_jsxs("span", { className: "text-xs text-muted-foreground flex-shrink-0", children: [data.lineCount, " lines"] }))] }), _jsx("span", { className: "text-xs text-muted-foreground", children: language })] }), _jsx("div", { className: "flex-1 overflow-auto", children: isLoading ? (_jsx("div", { className: "h-full flex items-center justify-center text-muted-foreground", children: "Loading file..." })) : data ? (_jsx("div", { className: "code-with-line-numbers", children: _jsx(SyntaxHighlighter, { language: language, style: syntaxTheme, wrapLines: true, wrapLongLines: true, lineProps: () => ({
                            className: 'code-line',
                        }), customStyle: {
                            margin: 0,
                            padding: '1rem',
                            background: 'transparent',
                            fontSize: '0.75rem',
                            lineHeight: '1.25rem',
                        }, codeTagProps: {
                            style: {
                                flex: 1,
                            },
                        }, children: data.content }) })) : (_jsx("div", { className: "h-full flex items-center justify-center text-muted-foreground", children: "Unable to load file" })) })] }));
});
//# sourceMappingURL=FileViewerPanel.js.map