import React, { useContext } from 'react';
import { SettingsContext } from './SettingsContext';
import Sidebar from '../components/Sidebar';
import ReferralTab from '../components/tabs/ReferralTab';
import RewardTab from '../components/tabs/RewardTab';
import RewardManagementTab from '../components/tabs/RewardManagementTab';
import EmailTab from '../components/tabs/EmailTab';
import ShortcodeTab from '../components/tabs/ShortcodeTab';
import ReportsTab from '../components/tabs/ReportsTab';
import DocumentationTab from '../components/tabs/DocumentationTab';
import Footer from '../components/Footer';
import LatestProMissingNotice from '../../components/LatestProMissingNotice';
import Loader from '../../components/core/Loader';
import MigrationComponent from '../components/MigrationComponent';

const SettingsApp = () => {
	const { activeTab, handleSave, handleReset, hasChanges, loading } = useContext(SettingsContext);

	const renderTabContent = () => {
		switch (activeTab) {
			case 'referral_settings':
				return <ReferralTab />;
			case 'reward_settings':
				return <RewardTab />;
			case 'reward_management':
				return <RewardManagementTab />;
			case 'email_settings':
				return <EmailTab />;
			case 'shortcodes_widgets':
				return <ShortcodeTab />;
			case 'reports_analytics':
				return <ReportsTab />;
			case 'help_documentation':
				return <DocumentationTab />;
			default:
				return null;
		}
	};

	return (
		<div className="echo-rewards-settings__dashboard ecre-flex ecre-font-['Inter']">
			{!ecreAdmin.is_pro_latest && ecreAdmin.is_pro_activated ? (
				<LatestProMissingNotice />
			) : ( 
				<>
				<Sidebar />
				<div className="echo-rewards-settings__content ecre-w-full ecre-px-5 md:ecre-px-8 ecre-py-7">
					<MigrationComponent />
					{(activeTab === 'referral_settings' || activeTab === 'reward_settings' || activeTab === 'email_settings') ? (
						<>
							{renderTabContent()}
							{hasChanges && <Footer onReset={handleReset} handleSave={handleSave} />}
						</>
							
					) : (
						renderTabContent()
					)}
				</div>
				</>
			)}

		</div>
	);
};

export default SettingsApp;