no-copy-frontend/src/app/ui/file-page/violation-table/case-complaint.tsx

'use client'

import { ViolationFileDetail } from '@/app/hooks/react-query/useFileViolations';
import { useActionState, useEffect, useState } from 'react';
import { useTranslations } from 'next-intl';
import { createComplaint, fetchComplainInfo } from '@/app/actions/violationActions';
import { toast } from 'sonner';
import { useQuery, useQueryClient } from '@tanstack/react-query';

interface complaintInfo {
	id: number,
	status: string,
	complaint_text: string,
	violation_id: number,
	email: string,
	created_at: string,
	updated_at: string,
	not_moderated: boolean
}

export default function CaseComplaint({ selectedViolation }: { selectedViolation: ViolationFileDetail }) {
	const t = useTranslations('Global');
	const queryClient = useQueryClient();

	const [showCreateCase, setShowCreateCase] = useState(false);
	const [localViolation, setLocalViolation] = useState<ViolationFileDetail>(selectedViolation);
	const [state, formAction, isPending] = useActionState(createComplaint, undefined);

	useEffect(() => {
		setLocalViolation(selectedViolation);
	}, [selectedViolation]);

	const { data: complainInfo, isLoading: isLoadingComplain } = useQuery({
		queryKey: ['complainInfo', localViolation.id],
		queryFn: () => fetchComplainInfo(localViolation.id),
		select: (data) => {
			if (data) {
				return data
			}
		},
		enabled: localViolation.status !== 'NEW' &&
			localViolation.status !== 'CREATED' &&
			localViolation.status !== 'SHOWED',
	});

	useEffect(() => {
		if (state?.success) {
			toast.success(t('the-complaint-has-been-registered'));

			setLocalViolation(prev => ({
				...prev,
				status: 'COMPLAINT_IN_WORK'
			}));

			queryClient.invalidateQueries({ queryKey: ['fileViolations'] });
			queryClient.invalidateQueries({ queryKey: ['complainInfo', localViolation.id] });

			setShowCreateCase(false);
		} else if (state && !state.success) {
			if (state.errorMessage) {
				toast.warning(t(state.errorMessage));
			} else {
				toast.warning(t('the-complaint-has-not-been-registered'));
			}
		}
	}, [state, queryClient, localViolation.id]);

	function toggleForm() {
		setShowCreateCase(!showCreateCase);
	}

	if (localViolation.status === 'NEW' || localViolation.status === 'CREATED' || localViolation.status === 'SHOWED') {
		return (
			<div className="violation-info-case">
				{!showCreateCase ? (
					<button
						type="button"
						className="btn-action btn-case"
						onClick={toggleForm}
					>
						{t('filing-complaint')}
					</button>
				) : (
					<div>
						<button
							type="button"
							className="btn-action btn-case"
							onClick={toggleForm}
						>
							{t('cancel')}
						</button>

						<div className="note-form">
							<form action={formAction}>
								<input type="hidden" name="violationId" value={localViolation.id} />
								<textarea
									name="note"
									className="note-textarea"
									placeholder={`${t('text-of-the-complaint')}...`}>
								</textarea>
								<button
									type="submit"
									className="btn-small btn-primary-small"
									disabled={isPending}
								>
									{t('submit-violation')}
								</button>
							</form>
						</div>
					</div>
				)}
			</div>
		);
	} else {
		if (isLoadingComplain) {
			return (
				<div className="violation-info-case">
					<div>{t('loading')}...</div>
				</div>
			);
		}

		return (
			<div className="violation-info-case">
				{complainInfo?.body.content ? (
					<div>
						{complainInfo.body.content.map((item: complaintInfo) => {
							return (
								<div key={item.id}>
									<h3 className="mb-3">
										{t('complaint-Information')}
									</h3>
									<div className="complaint-details">
										<p><strong>ID:</strong> {item.id}</p>
										<p><strong>{t('status')}:</strong> {item.status}</p>
										<p><strong>{t('text-of-the-complaint')}:</strong> {item.complaint_text}</p>
										<p><strong>{t('violation-id')}:</strong> {item.violation_id}</p>
										<p><strong>{t('email')}:</strong> {item.email}</p>
										<p><strong>{t('date-of-creation')}:</strong> {item.created_at}</p>
										<p><strong>{t('date-of-update')}:</strong> {item.updated_at}</p>
									</div>
								</div>
							);
						})}
					</div>
				) : (
					<div>
						{t('no-information-about-the-complaint')}
					</div>
				)}
			</div>
		);
	}
}