import React from 'react';
import { PanelBar, PanelBarItem } from '@progress/kendo-react-layout';
import { useNavigate } 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';
import { panelbarData } from '../data/panelbar-data';

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

const CampfirePanelBar = ({ isExpanded = true }) => {
    const navigate = useNavigate();

    const renderItem = (item) => {
        // External links
        if (item.url) {
            return (
                <PanelBarItem
                    key={item.title}
                    title={
                        <a
                            href={item.url}
                            target="_blank"
                            rel="noopener noreferrer"
                            style={{
                                display: 'flex',
                                alignItems: 'center',
                                width: '100%',
                                height: '100%',
                                color: 'inherit',
                                textDecoration: 'none'
                            }}
                        >
                            <SvgIcon 
                                icon={iconMap[item.icon]} 
                                size="medium" 
                                style={{ marginLeft: '30px' }}
                            />
                            <span style={{ marginLeft: '8px' }}>{item.title}</span>
                        </a>
                    }
                />
            );
        }

        // Internal routes
        if (item.route) {
            return (
                <PanelBarItem
                    key={item.title}
                    title={
                        <div
                            style={{
                                display: 'flex',
                                alignItems: 'center',
                                width: '100%',
                                height: '100%'
                            }}
                            onClick={() => navigate(item.route)}
                        >
                            <SvgIcon 
                                icon={iconMap[item.icon]} 
                                size="medium" 
                                style={{ marginLeft: '30px' }}
                            />
                            <span style={{ marginLeft: '8px' }}>{item.title}</span>
                        </div>
                    }
                />
            );
        }

        // Parent items with children
        return (
            <PanelBarItem
                key={item.title}
                title={
                    <div style={{ display: 'flex', alignItems: 'center' }}>
                        <SvgIcon 
                            icon={iconMap[item.icon]} 
                            size="medium" 
                            style={{ marginLeft: '8px' }}
                        />
                        <span style={{ marginLeft: '8px' }}>{item.title}</span>
                    </div>
                }
            >
                {item.items.map(renderItem)}
            </PanelBarItem>
        );
    };

    return (
        <div style={{ 
            width: isExpanded ? 300 : 200,
            minWidth: isExpanded ? 240 : 60,
            transition: 'width 0.3s'
        }}>
            <PanelBar>
                {panelbarData.map(renderItem)}
            </PanelBar>
        </div>
    );
};

export default CampfirePanelBar;