import {
	Box,
	Button,
	Card,
	Avatar,
	Table,
	TableBody,
	TableCell,
	TableHead,
	TableRow,
	TextField,
	Typography,
	TableContainer,
} from '@mui/material';
import { useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { MODAL_TYPES } from '../constants/constants';
import { useIsAllowedToAddProviderMutation } from '../redux/Actions/PlanActions';
import { dispatchAlert, useGetProvidersQuery } from '../redux/Actions/ProvidersAction';
import { setAlert, setModal } from '../redux/features/providers/providersSlice';
import Spinner from './Spinner';
import { ZoomInMapOutlined, Search } from '@mui/icons-material';

const ProvidersList = () => {
	const [loaderId, setLoaderId] = useState(null);
	const [filteredProviders, setFilteredProviders] = useState(null);
	const { providers } = useSelector(state => state.providers);
	const dispatch = useDispatch();
	const admin_obj = eniture_rtsq || {};
	const { isLoading, isFetching } = useGetProvidersQuery(admin_obj?.eniture_rtsq_rest_url);
	const [isAllowedToAddProvider, { isLoading: isAddingProvider }] =
		useIsAllowedToAddProviderMutation();

	const handleSearchProviders = searchValue => {
		if (!providers) return;

		const searchString = new RegExp(searchValue, 'gi');
		setFilteredProviders(providers.filter(provider => provider?.name?.match(searchString)));
	};

	const updatedProviders = filteredProviders ?? providers;

	const handleAddProvider = provider => {
		const payload = {
			action: 'is_allowed_to_add_provider',
			url: admin_obj?.eniture_rtsq_rest_url,
			provider_id: provider?.id,
		};

		isAllowedToAddProvider(payload)
			.unwrap()
			.then(res => {
				setLoaderId('');
				if (res.error) {
					dispatch(setAlert(dispatchAlert(true, res?.message, 'error')));
					return;
				}

				dispatch(
					setModal({
						open: true,
						type: MODAL_TYPES.connection_settings,
						data: { action: 'add', ...provider },
					})
				);
			})
			.catch(err => {
				setLoaderId('');
				console.log('isAllowedToAddProvider error', err);
			});
	};

	return (
		<Box mt={5}>
			<Typography variant='subtitle2' fontWeight='bold' my={2}>
				All Providers
			</Typography>

			<Card sx={{ p: 2 }}>
				{/* Search providers */}
				<TextField
					fullWidth
					size='medium'
					variant='outlined'
					placeholder='Search providers'
					title='Search providers'
					type='search'
					InputLabelProps={{ shrink: true }}
					onChange={e => handleSearchProviders(e.target.value)}
				/>

				<TableContainer sx={{ overflowX: 'auto', width: '100%' }}>
					<Table aria-label='providers table' sx={{ mt: 2, minWidth: 700 }}>
						<TableHead sx={{ bgcolor: '#f5f5f5', p: 1 }}>
							<TableRow>
								<TableCell>
									<strong>Provider image</strong>
								</TableCell>
								<TableCell>
									<strong>Provider name</strong>
								</TableCell>
								<TableCell>
									<strong>Actions</strong>
								</TableCell>
							</TableRow>
						</TableHead>
						<TableBody>
							{(isLoading || isFetching) && (
								<TableRow
									sx={{ '&:last-child td, &:last-child th': { border: 0 } }}>
									<TableCell colSpan={3} align='center'>
										<Spinner />
									</TableCell>
								</TableRow>
							)}

							{/* Empty state */}
							{!isLoading && !isFetching && !updatedProviders?.length && (
								<TableRow
									sx={{ '&:last-child td, &:last-child th': { border: 0 } }}>
									<TableCell colSpan={3} align='center'>
										<Search sx={{ fontSize: 75, color: 'gray' }} />
										<Typography variant='h1' fontWeight='bold'>
											No providers found
										</Typography>
										<Typography variant='caption' color='gray'>
											Try changing the filters or search term
										</Typography>
									</TableCell>
								</TableRow>
							)}

							{!isLoading &&
								updatedProviders?.map(provider => (
									<TableRow
										key={provider.id}
										sx={{ '&:last-child td, &:last-child th': { border: 0 } }}>
										<TableCell>
											<Avatar
												variant='rounded'
												src={`${admin_obj?.eniture_rtsq_url}/build/assets/${provider.image}`}
												alt={provider.name}
												sx={{ width: 80, height: 80, '& img': { objectFit: 'contain' } }}
											/>
										</TableCell>
										<TableCell>{provider.name}</TableCell>
										<TableCell>
											<Button
												size='small'
												variant='text'
												type='button'
												title='Add account'
												disabled={isAddingProvider}
												onClick={() => {
													setLoaderId(provider.id);
													handleAddProvider(provider);
												}}
												sx={{ textTransform: 'initial' }}>
												{isAddingProvider && loaderId === provider.id ? (
													<Spinner size={25} />
												) : (
													'Add account'
												)}
											</Button>
										</TableCell>
									</TableRow>
								))}
						</TableBody>
					</Table>
				</TableContainer>
			</Card>
		</Box>
	);
};

export default ProvidersList;