import { HolidayVillage, Polyline } from '@mui/icons-material';
import DownloadForOfflineIcon from '@mui/icons-material/DownloadForOffline';
import PersonSearchIcon from '@mui/icons-material/PersonSearch';
import WarehouseIcon from '@mui/icons-material/Warehouse';
import SettingIcon from '@mui/icons-material/Settings';
import Inventory2Icon from '@mui/icons-material/Inventory2';
import RuleIcon from '@mui/icons-material/Rule';
import ReceiptLongIcon from '@mui/icons-material/ReceiptLong';
import SupportAgentIcon from '@mui/icons-material/SupportAgent';
import { Box, Grid, List, ListItemButton, useMediaQuery } from '@mui/material';
import { useEffect, useRef, useState } from 'react';
import { useDispatch } from 'react-redux';
import { Link, useSearchParams } from 'react-router-dom';
import { useGetInstalledProvidersQuery } from '../redux/Actions/ProvidersAction';
import { setCurrentProvider } from '../redux/features/providers/providersSlice';

const styles = {
	sidebar: {
		backgroundColor: '#e7e7e7',
		height: '100vh',
		position: 'fixed',
		width: 250,
		padding: 0,
		boxSizing: 'border-box',
	},
	navItemButton: { display: 'flex', alignItems: 'center', gap: 2 },
	navLink: { textDecoration: 'none', color: 'inherit' },
};

const navLinks = [
	{ name: 'Eniture API Connection', icon: <Polyline />, path: 'connection_settings' },
	{ name: 'Providers', icon: <DownloadForOfflineIcon />, path: 'providers' },
	{ name: 'Warehouses', icon: <WarehouseIcon />, path: 'locations' },
	{ name: 'Other Settings', icon: <SettingIcon />, path: 'other_settings' },
	{ name: 'Address Type Settings', icon: <HolidayVillage />, path: 'address_type_settings' },
	{ name: 'Shipping Rules', icon: <RuleIcon />, path: 'shipping_rules' },
	{ name: 'Box Sizes', icon: <Inventory2Icon />, path: 'box_sizes' },
	{ name: 'Pallets', icon: <Inventory2Icon />, path: 'pallets' },
	{ name: 'Support', icon: <SupportAgentIcon />, path: 'support' },
	{ name: 'User Guide', icon: <PersonSearchIcon />, path: 'user_guide' },
	{ name: 'Logs', icon: <ReceiptLongIcon />, path: 'logs' },
];

const Sidebar = () => {
	const [activeLink, setActiveLink] = useState('');
	const [searchParams] = useSearchParams();
	const sidebarRef = useRef();
	const admin_obj = eniture_rtsq || {};
	const { isLoading, isFetching } = useGetInstalledProvidersQuery(
		admin_obj?.eniture_rtsq_rest_url
	);
	const path = window.location.pathname + '?page=wc-settings&tab=eniture_rtsq&section=';
	const dispatch = useDispatch();
	const isSmall = useMediaQuery('(max-width:900px)');

	useEffect(() => {
		setActiveLink(searchParams.get('section') || 'connection_settings');
	}, [path]);

	useEffect(() => {
		const handleScroll = () => {
			const { top } = document.querySelector('.eniture_rtsq_wrapper').getBoundingClientRect();
			sidebarRef.current.style.top = window.scrollY > 60 ? (top < 0 ? 110 : top + 45) : '';
		};
		window.addEventListener('scroll', handleScroll);

		return () => window.removeEventListener('load scroll', handleScroll);
	}, []);

	return (
		<Grid item>
			<Box style={{ ...styles.sidebar, width: isSmall ? 60 : 250 }} ref={sidebarRef}>
				<nav aria-label='main' className='eniture_rtsq_sidebar'>
					<List>
						{navLinks.map((link, index) => (
							<Link
								key={index}
								to={path + link.path}
								style={styles.navLink}
								onClick={() => {
									dispatch(setCurrentProvider(null));
									setActiveLink(link.path);
								}}>
								<ListItemButton
									selected={activeLink === link.path}
									sx={styles.navItemButton}
									title={link.name}>
									{link.icon} {isSmall ? '' : link.name}
								</ListItemButton>
							</Link>
						))}
					</List>
				</nav>
			</Box>
		</Grid>
	);
};

export default Sidebar;