import React from 'react';
import { Drawer, DrawerContent } from '@progress/kendo-react-layout';
import { useNavigate, useLocation } from 'react-router-dom';
import { SvgIcon } from '@progress/kendo-react-common';
import { bookIcon, inboxIcon, trackChangesIcon, plusOutlineIcon, globeOutlineIcon, linkIcon, tellAFriendIcon, facebookIcon, xLogoIcon, linkedinIcon, redditIcon } from '@progress/kendo-svg-icons';

class ErrorBoundary extends React.Component {
    constructor(props) {
        super(props);
        this.state = { hasError: false };
    }

    static getDerivedStateFromError(error) {
        return { hasError: true };
    }

    componentDidCatch(error, errorInfo) {
        console.error("ErrorBoundary caught an error", error, errorInfo);
    }

    render() {
        if (this.state.hasError) {
            return <h1>Something went wrong.</h1>;
        }

        return this.props.children;
    }
}

const iconMap = {
    bookIcon,
    inboxIcon,
    trackChangesIcon,
    plusOutlineIcon,
    globeOutlineIcon,
    linkIcon,
    tellAFriendIcon,
    facebookIcon,
    xLogoIcon,
    linkedinIcon,
    redditIcon
};

const SidebarDrawer = ({ children, isExpanded, onDrawerToggle, isLoggedIn }) => {
    const navigate = useNavigate();
    const location = useLocation();

    const drawerItems = [
        { text: 'Content Summary', icon: 'bookIcon', route: '/dashboard' },
        { separator: true },
        { text: 'Published Posts', icon: 'inboxIcon', route: '/posts' },
        { text: 'Drafts', icon: 'trackChangesIcon', route: '/posts' },
        { text: 'New Post', icon: 'plusOutlineIcon', route: '/editor' },
        { separator: true },
        { text: 'External Links', icon: 'globeOutlineIcon', route: null },
        { separator: true },
        { text: 'dlseitz.dev', icon: 'linkIcon', route: 'https://dlseitz.dev', parent: 'External Links' },
        { text: 'Gitea', icon: 'linkIcon', route: 'https://gitea.dlseitz.dev', parent: 'External Links' },
        { text: 'Notion', icon: 'linkIcon', route: 'https://www.notion.so', parent: 'External Links' },
        { text: 'Hashnode', icon: 'linkIcon', route: 'https://hashnode.com', parent: 'External Links' },
        { text: 'DEV.to', icon: 'linkIcon', route: 'https://dev.to', parent: 'External Links' },
        { text: 'Venice.ai', icon: 'linkIcon', route: 'https://venice.ai', parent: 'External Links' },
        { separator: true },
        { text: 'Social', icon: 'tellAFriendIcon', route: null },
        { separator: true },
        { text: 'FaceBook', icon: 'facebookIcon', route: 'https://facebook.com', parent: 'Social' },
        { text: 'X', icon: 'xLogoIcon', route: 'https://x.com', parent: 'Social' },
        { text: 'LinkedIn', icon: 'linkedinIcon', route: 'https://linkedin.com', parent: 'Social' },
        { text: 'Reddit', icon: 'redditIcon', route: 'https://reddit.com', parent: 'Social' }
    ];

    console.log('Drawer Items:', drawerItems);

    const drawerItemRender = (props) => {
        console.log('itemRender called with props:', props);
        const { item } = props;
        const isSelected = item.route && item.route === location.pathname;

        console.log('Rendering item:', item);
        console.log('Icon Component:', item.icon);
        console.log('Route:', item.route);

        if (item.separator) {
            return <li className="k-drawer-separator" />;
        }

        if (item.route === null) {
            return (
                <li className="k-drawer-item k-text-primary">
                    <SvgIcon icon={iconMap[item.icon]} size="medium" />
                    <span style={{ marginLeft: '10px', fontSize: '0.9em', fontWeight: 'bold' }}>{item.text}</span>
                </li>
            );
        }

        if (item.route.startsWith('http')) {
            return (
                <li className="k-drawer-item">
                    <a href={item.route} target="_blank" rel="noopener noreferrer" className="k-drawer-link">
                        <SvgIcon icon={iconMap[item.icon]} />
                        <span style={{ marginLeft: '10px' }}>{item.text}</span>
                    </a>
                </li>
            );
        }

        return (
            <li className={`k-drawer-item ${isSelected ? 'k-selected' : ''}`} onClick={() => navigate(item.route)}>
                <span className="k-drawer-link">
                    <SvgIcon icon={iconMap[item.icon]} />
                    <span style={{ marginLeft: '10px' }}>{item.text}</span>
                </span>
            </li>
        );
    };

    return (
        <ErrorBoundary>
            <Drawer
                expanded={isExpanded}
                mode="push"
                mini={false}
                position="start"
                items={drawerItems.map(item => ({ ...item, selected: item.route === location.pathname }))}
                itemRender={drawerItemRender}
            >
                <DrawerContent>
                    {children}
                </DrawerContent>
            </Drawer>
        </ErrorBoundary>
    );
};

export default SidebarDrawer;