import { Box, Button, CircularProgress } from '@mui/material';
import { useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import useValidateSettings from '../hooks/useValidateSettings';
import {
	dispatchAlert,
	providersApi,
	useSaveConnectionSettingsMutation,
} from '../redux/Actions/ProvidersAction';
import { setAlert, setModal, updateProvider } from '../redux/features/providers/providersSlice';

const ConnectionSettingsButtons = ({ connectionSettings, isLoading, setErrorsMsg, showSave = true }) => {
	const [loaderId, setLoaderId] = useState('');
	const { modal, eniture_api_key } = useSelector(state => state.providers);
	const validateSettings = useValidateSettings();
	const dispatch = useDispatch();
	const admin_obj = eniture_rtsq || {};
	const [saveConnectionSettings, { isLoading: isSaving }] = useSaveConnectionSettingsMutation();

	const handleSubmit = (test = false) => {
		const { errors, settings } = validateSettings(connectionSettings, test, modal.data?.code);
		setErrorsMsg(errors);
		if (Object.keys(errors).length > 0) {
			// dispatch(setAlert(dispatchAlert(true, message, 'error')));
			setLoaderId('');
			return;
		}

		const data = {
			...connectionSettings,
			eniture_api_key,
			action: test ? 'test_connection_settings' : 'save_connection_settings',
			provider: modal.data?.code,
			testType: test ? 'test' : 'save',
			edit_provider: modal.data?.action === 'edit',
		};

		if (modal.data?.action === 'edit') {
			data.installed_provider_uuid = modal.data?.uuid;
			delete data.provider_id;
		} else {
			data.provider_id = modal.data?.id;
			delete data.installed_provider_uuid;
		}

		saveConnectionSettings({
			url: admin_obj?.eniture_rtsq_rest_url,
			...data,
		})
			.unwrap()
			.then(res => {
				setLoaderId('');
				dispatch(
					setAlert(
						dispatchAlert(
							true,
							res?.data?.message ?? res?.message,
							res?.data?.error || res?.error ? 'error' : 'success'
						)
					)
				);

				// Invalidate tags after saving the connection settings
				if (res?.data?.data?.save) {
					dispatch(providersApi.util.invalidateTags(['InstalledProviders']));
				}

				// Update the provider details in the state
				if (!test && modal.data?.action === 'edit') {
					dispatch(updateProvider(res?.data?.data?.provider));
				}

				// Close the modal after successful save
				const error = res?.data?.error || res?.error;
				if (!test && !error) dispatch(setModal({ ...modal.data, open: false }));
			})
			.catch(err => {
				setLoaderId('');
				console.log('saveConnectionSettings error', err);
			});
	};

	return (
		<Box sx={{ display: 'flex', gap: 2, justifyContent: 'flex-end' }}>
			<Button
				variant='contained'
				size='medium'
				title='Test Connection'
				disabled={isLoading || isSaving}
				onClick={() => {
					setLoaderId('test_provider');
					handleSubmit(true);
				}}
				sx={{ textTransform: 'capitalize' }}>
				{loaderId === 'test_provider' ? (
					<CircularProgress size={20} sx={{ color: 'white' }} />
				) : (
					'Test Connection'
				)}
			</Button>
			{showSave && (
				<Button
					variant='contained'
					size='medium'
					title='Save Settings'
					disabled={isLoading || isSaving}
					onClick={() => {
						setLoaderId('save_provider');
						handleSubmit();
					}}
					sx={{ textTransform: 'capitalize' }}>
					{loaderId === 'save_provider' || isLoading ? (
						<CircularProgress size={20} sx={{ color: 'white' }} />
					) : (
						'Save'
					)}
				</Button>
			)}
		</Box>
	);
};

export default ConnectionSettingsButtons;