import { Box, Skeleton, Tab, Tabs } from '@mui/material';
import React, { useEffect, useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { useSearchParams } from 'react-router-dom';
import { QuoteSettings } from '../pages';
import { setCurrentProvider } from '../redux/features/providers/providersSlice';
import Carriers from '../pages/Carriers';

const ProviderTabs = () => {
	const [value, setValue] = useState(0);
	const [searchParams] = useSearchParams();
	const pvdUuid = decodeURI(searchParams.get('section'))?.split('/').pop();
	const { currentProvider, installedProviders } = useSelector(state => state.providers);
	const dispatch = useDispatch();

	useEffect(() => {
		if (!pvdUuid || !installedProviders) return;
		dispatch(setCurrentProvider(pvdUuid));
	}, [pvdUuid, dispatch, installedProviders]);

	useEffect(() => {
		if (!currentProvider) return;
		setValue(+currentProvider?.is_3pl ? 0 : 1);
	}, [currentProvider]);

	const handleChange = (event, newValue) => setValue(newValue);

	if (!currentProvider || !installedProviders) {
		return (
			<Skeleton variant='rounded' animation='wave' height={500} sx={{ margin: '0 auto' }} />
		);
	}

	return (
		<>
			<Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
				<Tabs value={value} onChange={handleChange} aria-label='provider tabs'>
					<Tab
						label='Carriers'
						id='carriers-tab'
						aria-controls='carriers-tab'
						hidden={value !== 0}
					/>
					<Tab
						label='Quote Settings'
						id='quote-settings-tab'
						aria-controls='quote-settings-tab'
					/>
				</Tabs>
			</Box>
			<div
				role='tabpanel'
				hidden={value !== 0}
				id='carriers-tab'
				aria-labelledby='carriers-tab'>
				<Carriers />
			</div>
			<div
				role='tabpanel'
				hidden={value !== 1}
				id='quote-settings-tab'
				aria-labelledby='quote-settings-tab'>
				<QuoteSettings />
			</div>
		</>
	);
};

export default ProviderTabs;