import { Skeleton } from '@mui/material';
import React from 'react';
import { useSearchParams } from 'react-router-dom';
import { Locations, OtherSettings, Plans, Providers, RAD, BoxSizes, Pallets, UserGuide, ShippingRules, TransactionLogs, Support } from '../pages/index';
import { ProviderTabs } from './index';

const Wrapper = () => {
	const [searchParams] = useSearchParams(),
		tab = searchParams.get('tab'),
		section = searchParams.get('section')?.split('/')[0];

	if (tab.trim() !== 'eniture_rtsq') return;

	const components = {
		connection_settings: <Plans />,
		providers: <Providers />,
		locations: <Locations />,
		user_guide: <UserGuide />,
		quote_settings: <ProviderTabs />,
		address_type_settings: <RAD />,
		box_sizes: <BoxSizes />,
		pallets: <Pallets />,
		other_settings: <OtherSettings />,
		shipping_rules: <ShippingRules />,
		logs: <TransactionLogs />,
		support: <Support />,
	};

	return (
		<React.Suspense fallback={<Skeleton variant='rounded' animation='wave' height={500} />}>
			{components[section] || <Plans />}
		</React.Suspense>
	);
};

export default Wrapper;