'use client'

import { useTranslations } from 'next-intl';
import { useAllFilesExtensions } from '@/app/hooks/react-query/useAllFilesExtensions';
import VerificationUploadSection from '@/app/ui/settings/component/verification-upload-section';
import { useUserProfile } from '@/app/hooks/react-query/useUserDataInfo';

export default function SettingUserVerification() {
	const t = useTranslations('User-status');

	const { data: allFilesExtensions } = useAllFilesExtensions();
	const { data: userData, isLoading, isError } = useUserProfile();

	const getVerifiedStatusText = (status: string | undefined | null) => {
		switch (status) {
			case 'VERIFICATION_IN_PROGRESS':
				return t('under-moderation');
			case 'NOT_VERIFIED':
				return t('NOT_VERIFIED');
			case 'VERIFIED':
				return t('VERIFIED');
			case 'VERIFICATION_FAILED':
				return t('VERIFICATION_FAILED');
			case 'unknow':
				return t('unknow');
			case undefined:
			case null:
				return t('NOT_VERIFIED');
			default:
				return t('NOT_VERIFIED');
		}
	};

	return (
		<div className="settings-form">
			<div className="form-section verefication-section">
				<h3 className="form-section-title">
					{t('user-verification')}
				</h3>
				{userData?.verifiedStatus === 'NOT_VERIFIED' || userData?.verifiedStatus === null ? (
					<VerificationUploadSection
						fileType="image"
						allowedExtensions={allFilesExtensions.images}
						maxFileSize={allFilesExtensions.maxFileSize}
					/>
				) : (
					<span>
						{t('Status')}: {getVerifiedStatusText(userData?.verifiedStatus)}
					</span>
				)}
			</div>
		</div>
	)
}