import { useCallback, useState } from 'react';
import { ModalComponent } from './index';
import { MODAL_TYPES } from '../constants/constants';
import {
	TForceQuoteSettings,
	CTQuoteSettings,
	WWELtlQuoteSettings,
	WWESmallQuoteSettings,
	AAACooperQuoteSettings,
	FedexSmallQuoteSettings,
	UpsSmallQuoteSettings,
} from './installed_providers';
import { useDispatch, useSelector } from 'react-redux';
import {
	dispatchAlert,
	useGetQuoteSettingsMutation,
	useSaveQuoteSettingsMutation,
} from '../redux/Actions/ProvidersAction';
import { setAlert, setModal } from '../redux/features/providers/providersSlice';
import useGetData from '../hooks/useGetData';
import { useMediaQuery } from '@mui/material';

const QuoteSettingsModal = () => {
	const [quoteSettings, setQuoteSettings] = useState({});
	const [saveQuoteSettings, { isLoading: isSaving }] = useSaveQuoteSettingsMutation();
	const { isLoading } = useGetData({
		useDynamicMutation: useGetQuoteSettingsMutation,
		setDataState: setQuoteSettings,
		action: 'get_quote_settings',
	});
	const admin_obj = eniture_rtsq || {};
	const { modal } = useSelector(state => state.providers);
	const dispatch = useDispatch();
	const isSmall = useMediaQuery('(max-width:1200px)');

	const handleStateChange = useCallback((name, val) => {
		setQuoteSettings(prevState => ({ ...prevState, [name]: val }));
	}, []);

	const componentProps = {
		state: quoteSettings,
		setQuoteSettingsState: setQuoteSettings,
		handleChange: handleStateChange,
		isLoading: isLoading,
	};

	const settings_component = {
		WWELtl: <WWELtlQuoteSettings {...componentProps} />,
		WWESmall: <WWESmallQuoteSettings {...componentProps} />,
		TForce: <TForceQuoteSettings {...componentProps} />,
		CentralTransport: <CTQuoteSettings {...componentProps} />,
		AAACooper: <AAACooperQuoteSettings {...componentProps} />,
		FedexSmall: <FedexSmallQuoteSettings {...componentProps} />,
		UpsSmall: <UpsSmallQuoteSettings {...componentProps} />,
	};

	const handleSubmit = () => {
		// check if any service is selected
		if (quoteSettings?.services) {
			const all_services = [
				...Object.values(quoteSettings?.services?.domestic || {}),
				...Object.values(quoteSettings?.services?.international || {}),
				...Object.values(quoteSettings?.services?.one_rate || {}),
				...Object.values(quoteSettings?.services?.contract || {}),
			].filter(service => service);

			if (!all_services?.length) {
				dispatch(
					setAlert(
						dispatchAlert(true, 'Please select at least one service option.', 'error')
					)
				);
				return;
			}
		}

		saveQuoteSettings({
			action: 'save_quote_settings',
			url: admin_obj?.eniture_rtsq_rest_url,
			installed_provider_uuid: modal?.data?.uuid,
			...quoteSettings,
		})
			.unwrap()
			.then(res => {
				dispatch(setAlert(dispatchAlert(true, res?.message, 'success')));
				dispatch(setModal({ open: false, type: '', data: {} }));
			});
	};

	return (
		<ModalComponent
			title='Quote Settings'
			type={MODAL_TYPES.quote_settings}
			maxWidth={isSmall ? 'sm' : 'md'}
			handleSubmit={handleSubmit}
			isLoading={isLoading || isSaving}>
			{/* Load quote settings component dynamically */}
			{settings_component[modal.data?.code] && settings_component[modal.data?.code]}
		</ModalComponent>
	);
};

export default QuoteSettingsModal;