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';
import { MatchStatus } from '@/app/actions/violationActions';
import {formatDate, formatDateTime} from '@/app/lib/formatDate';

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

const ENABLED_STATUSES = ['COMPLAINT_IN_WORK', 'COMPLAINT_AND_LEGAL_IN_WORK'];
type UpdateStatusHandler = (id: number, status: MatchStatus) => Promise<boolean>;

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

	const [localViolation, setLocalViolation] = useState<ViolationFileDetail>(selectedViolation);
	const [noteText, setNoteText] = useState('');
	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: ENABLED_STATUSES.includes(localViolation.status),
	});

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

			const newStatus = selectedViolation.status === 'LEGAL_IN_WORK'
				? 'COMPLAINT_AND_LEGAL_IN_WORK'
				: 'COMPLAINT_IN_WORK';

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

			updateStatusHandler(selectedViolation.id, newStatus);
		} else if (state && !state.success) {
			console.log(state.errorMessage);
			if (state.errorMessage?.server) {
				toast.warning(t(state.errorMessage.server));
			} else {
				toast.warning(t('the-complaint-has-not-been-registered'));
			}
		}
	}, [state, updateStatusHandler, selectedViolation.id]);

	function templateHandler(e: React.MouseEvent<HTMLLIElement>) {
		const sampleItemText = e.currentTarget.querySelector('.sample-item-text');

		if (sampleItemText) {
			const text = sampleItemText.textContent || '';
			setNoteText(text);
		}
	}

	if (!ENABLED_STATUSES.includes(localViolation.status)) {
		return (
			<div className="violation-info-case">

				<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')}...`}
							value={noteText}
							onChange={(e) => setNoteText(e.target.value)}
						>
						</textarea>
						<div
							className="button-actions"
						>
							<button
								type="submit"
								className="btn-small btn-primary-small"
								disabled={isPending}
								onClick={(e) => {
									e.preventDefault();
								}}
							>
								Сохранить шаблон
							</button>

							<button
								type="submit"
								className="btn-small btn-primary-small"
								disabled={isPending}
							>
								{t('submit-violation')}
							</button>

							{state?.errorMessage?.textArea && (
								<p
									className="text-sm text-red-500"
								>

									{
										state?.errorMessage?.textArea.split('&').map((e, index) => {
											return (
												<span key={index}>
													{t(e)}
													<br />
												</span>
											)
										})
									}
								</p>
							)}
						</div>
					</form>

				</div>
				<div
					className="samples-wrapper"
				>
					<h5>Шаблоны</h5>

					<ul
						className="samples-list"
					>
						<li
							className="sample-item"
							onClick={(e) => {
								templateHandler(e)
							}}
						>
							<div
								className="sample-item-title"
							>
								title 1
							</div>
							<div
								className="sample-item-text"
							>
								1text text text text text text text text text text text text
							</div>
						</li>
						<li
							className="sample-item"
							onClick={(e) => {
								templateHandler(e)
							}}
						>
							<div
								className="sample-item-title"
							>
								title 2
							</div>
							<div
								className="sample-item-text"
							>
								2text text text text text text text text text text text text
							</div>
						</li>
						<li
							className="sample-item"
							onClick={(e) => {
								templateHandler(e)
							}}
						>
							<div
								className="sample-item-title"
							>
								title 3
							</div>
							<div
								className="sample-item-text"
							>
								3text text text text text text text text text text text text
							</div>
						</li>

						<li
							className="sample-item"
							onClick={(e) => {
								templateHandler(e)
							}}
						>
							<div
								className="sample-item-title"
							>
								title 3
							</div>
							<div
								className="sample-item-text"
							>
								3text text text text text text text text text text text text
							</div>
						</li>

						<li
							className="sample-item"
							onClick={(e) => {
								templateHandler(e)
							}}
						>
							<div
								className="sample-item-title"
							>
								title 3
							</div>
							<div
								className="sample-item-text"
							>
								3text text text text text text text text text text text text
							</div>
						</li>
					</ul>
				</div>
			</div>
		);
	} else {
		if (isLoadingComplain) {
			return (
				<div className="violation-info-case">
					<div
						className="loading-animation"
					>
						<div
							className="global-spinner large"
						>
						</div>
					</div>
				</div>
			);
		}

		return (
			<div className="violation-info-case">
				{complainInfo?.body.content ? (
					<div>
						{complainInfo.body.content.map((item: complaintInfo) => {
							return (
								<div key={item.id}>
									<div className="complaint-details">
										<div
											className="complaint-details-item"
										>
											<strong>ID:</strong> {item.id}
										</div>
										<div
											className="complaint-details-item"
										>
											<span
												className="complaint-details-title"
											>
												{t('status')}:
											</span>
											<br />
											<span
												className="complaint-details-text"
											>
												{item.status}
											</span>
										</div>
										<div
											className="complaint-details-item"
										>
											<span
												className="complaint-details-title"
											>
												{t('date-of-creation')}:
											</span>
											<br />
											<span
												className="complaint-details-text"
											>
												{item.created_at ? `${formatDate(item.created_at)}: ${formatDateTime(item.created_at)}` : '---'}
											</span>
										</div>
										<div
											className="complaint-details-item"
										>
											<span
												className="complaint-details-title"
											>
												{t('date-of-update')}:
											</span>
											<br />
											<span
												className="complaint-details-text"
											>
												{item.updated_at ? `${formatDate(item.updated_at)}: ${formatDateTime(item.updated_at)}` : '---'}
											</span>
										</div>
										<div
											className="complaint-details-item"
										>
											<span
												className="complaint-details-title"
											>
												{t('text-of-the-complaint')}:
											</span>
											<br />
											<span
												className="complaint-details-text"
											>
												{item.complaint_text}
											</span>
										</div>
									</div>
								</div>
							);
						})}
					</div>
				) : (
					<div>
						{t('no-information-about-the-complaint')}
					</div>
				)}
			</div>
		);
	}
}