import { useState } from 'react';
import {
	Box,
	Button,
	CircularProgress,
	Typography,
	Card,
	Table,
	TableHead,
	TableRow,
	TableCell,
	TableBody,
	Avatar,
	TableContainer,
	Paper,
} from '@mui/material';
import { styled } from '@mui/material/styles';
import { useDispatch, useSelector } from 'react-redux';
import {
	dispatchAlert,
	useGetInstalledProvidersQuery,
	useUpdateInstalledProviderStatusMutation,
} from '../redux/Actions/ProvidersAction';
import {
	setAlert,
	setCurrentProvider,
	setModal,
	updateProviderStatus,
} from '../redux/features/providers/providersSlice';
import { MODAL_TYPES } from '../constants/constants';
import {
	useIsAllowedToAddProviderMutation,
	useRefreshPlanMutation,
} from '../redux/Actions/PlanActions';

const Demo = styled('div')(({ theme }) => ({
	backgroundColor: theme.palette.background.paper,
}));

const InstalledProvidersList = () => {
	const [filteredProviders, setFilteredProviders] = useState(null);
	const [loaderId, setLoaderId] = useState('');
	const { installedProviders } = useSelector(state => state.providers);
	const dispatch = useDispatch();
	const admin_obj = eniture_rtsq || {};
	const { isLoading, isFetching } = useGetInstalledProvidersQuery(
		admin_obj?.eniture_rtsq_rest_url
	);
	const [updateInstalledProviderStatus, { isLoading: statusLoading }] =
		useUpdateInstalledProviderStatusMutation();
	const [refreshPlan] = useRefreshPlanMutation();
	const { planInfo } = useSelector(state => state.plan);
	const [isAllowedToAddProvider, { isLoading: isAddingProvider }] =
		useIsAllowedToAddProviderMutation();
	const updatedProviders = filteredProviders?.length > 0 ? filteredProviders : installedProviders;

	// handle provider status change
	const hanadleStatusChange = async (provider, status) => {
		try {
			if (status) {
				const payload = {
					action: 'is_allowed_to_add_provider',
					url: admin_obj?.eniture_rtsq_rest_url,
					provider_id: provider?.provider_id,
				};
				const res = await isAllowedToAddProvider(payload).unwrap();
				setLoaderId('');

				if (res.error) {
					dispatch(setAlert(dispatchAlert(true, res?.message, 'error')));
					return;
				}
			}
		} catch (error) {
			setLoaderId('');
			console.log('isAllowedToAddProvider error', error);
		}

		updateInstalledProviderStatus({
			url: admin_obj?.eniture_rtsq_rest_url,
			installed_provider_uuid: provider?.uuid,
			status,
		})
			.unwrap()
			.then(res => {
				if (!res?.error) {
					dispatch(updateProviderStatus({ uuid: provider?.uuid, status }));

					// Update the active installed providers list on WS end also
					const payload = {
						action: 'update_providers_list',
						url: admin_obj?.eniture_rtsq_rest_url,
					};
					refreshPlan(payload);
				}

				dispatch(
					setAlert(dispatchAlert(true, res?.message, res.error ? 'error' : 'success'))
				);
				setLoaderId('');
			})
			.catch(err => {
				console.log('updateInstalledProviderStatus error', err);
				dispatch(setAlert(dispatchAlert(true, err?.data?.message, 'error')));
				setLoaderId('');
			});
	};

	return (
		<>
			<Box>
				<Typography variant='h6' fontWeight='bold' mb={4}>
					Providers
				</Typography>
				{planInfo && planInfo?.name && (
					<>
						<Typography variant='subtitle2' fontWeight='bold'>
							Current plan: {planInfo?.name}
						</Typography>
						<Typography variant='subtitle2' fontWeight='bold'>
							Enable upto {planInfo?.allowed_providers || 0} providers
						</Typography>
						<Typography variant='subtitle2' fontWeight='bold' mt={2}>
							Installed Providers
						</Typography>
					</>
				)}

				<Card sx={{ p: 2, mt: 2, overflowX: 'auto' }} component={Paper}>
					<TableContainer sx={{ overflowX: 'auto', width: '100%' }}>
						<Table sx={{ minWidth: 900 }} aria-label='installed providers table'>
							{updatedProviders?.length > 0 && (
								<TableHead sx={{ bgcolor: '#f5f5f5', p: 1 }}>
									<TableRow>
										<TableCell style={{ minWidth: 100 }}>
											<strong>Provider image</strong>
										</TableCell>
										<TableCell>
											<strong>Nickname</strong>
										</TableCell>
										<TableCell align='center'>
											<strong>Actions</strong>
										</TableCell>
									</TableRow>
								</TableHead>
							)}

							<TableBody>
								{(isLoading || isFetching) && (
									<TableRow
										sx={{ '&:last-child td, &:last-child th': { border: 0 } }}>
										<TableCell colSpan={3} align='center'>
											<CircularProgress />
										</TableCell>
									</TableRow>
								)}

								{/* Empty state */}
								{!isLoading && !isFetching && !updatedProviders?.length && (
									<TableRow
										sx={{ '&:last-child td, &:last-child th': { border: 0 } }}>
										<TableCell colSpan={3} align='center'>
											No providers have been added yet. Please add a provider
											from the "All Providers" list shown below.
										</TableCell>
									</TableRow>
								)}

								{!isLoading &&
									!isFetching &&
									Array.isArray(updatedProviders) &&
									updatedProviders.map(provider => (
										<TableRow
											key={provider.id}
											sx={{
												'&:last-child td, &:last-child th': { border: 0 },
											}}>
											<TableCell component='th' scope='row'>
												<Avatar
													variant='rounded'
													// src={`${admin_obj?.eniture_rtsq_url}/frontend/src/assets/${provider.image}`}
													src={`${admin_obj?.eniture_rtsq_url}/build/assets/${provider.image}`}
													alt={provider.name}
													sx={{ width: 80, height: 80, '& img': { objectFit: 'contain' } }}
												/>
											</TableCell>
											<TableCell style={{ width: '30%' }}>
												{provider?.nickname || provider?.name}
											</TableCell>

											<TableCell>
												<Box sx={{ display: 'flex', gap: 2 }}>
													{+provider?.is_3pl > 0 && (
														<Button
															size='small'
															variant='text'
															type='button'
															title='Carriers'
															disabled={
																statusLoading || isAddingProvider
															}
															onClick={() => {
																dispatch(
																	setCurrentProvider(
																		provider.uuid
																	)
																);
																dispatch(
																	setModal({
																		open: true,
																		type: MODAL_TYPES.carriers,
																		data: {},
																	})
																);
															}}
															sx={{ textTransform: 'initial' }}>
															Carriers
														</Button>
													)}

													<Button
														size='small'
														variant='text'
														type='button'
														title='Quote settings'
														disabled={statusLoading || isAddingProvider}
														onClick={() => {
															dispatch(
																setModal({
																	open: true,
																	type: MODAL_TYPES.quote_settings,
																	data: {
																		action: 'edit',
																		mutation_type:
																			'get_quote_settings',
																		...provider,
																	},
																})
															);
														}}
														sx={{
															textTransform: 'initial',
															ml: +provider?.is_3pl > 0 ? 0 : 10,
														}}>
														Quote settings
													</Button>

													<Button
														size='small'
														variant='text'
														type='button'
														title='Connection settings'
														disabled={statusLoading || isAddingProvider}
														onClick={() =>
															dispatch(
																setModal({
																	open: true,
																	type: MODAL_TYPES.connection_settings,
																	data: {
																		action: 'edit',
																		mutation_type:
																			'get_connection_settings',
																		...provider,
																	},
																})
															)
														}
														sx={{ textTransform: 'initial' }}>
														Connection settings
													</Button>

													<Button
														size='small'
														variant='contained'
														disabled={statusLoading || isAddingProvider}
														sx={{ textTransform: 'capitalize', ml: 2 }}
														color={
															+provider.status ? 'error' : 'primary'
														}
														onClick={() => {
															setLoaderId(provider.id);
															hanadleStatusChange(
																provider,
																+provider.status ? 0 : 1
															);
														}}>
														{(statusLoading || isAddingProvider) &&
														loaderId === provider.id ? (
															<CircularProgress size={25} />
														) : +provider.status ? (
															'Deactivate'
														) : (
															'Activate'
														)}
													</Button>
												</Box>
											</TableCell>
										</TableRow>
									))}
							</TableBody>
						</Table>
					</TableContainer>
				</Card>
			</Box>
		</>
	);
};

export default InstalledProvidersList;