no-copy-frontend/src/app/ui/file-page/violation-table/file-page-violation-info-tabs.tsx

'use client'

import CaseComplaint from '@/app/ui/file-page/violation-table/case-complaint';
import CaseLegal from '@/app/ui/file-page/violation-table/case-legal';
import { ViolationFileDetail } from '@/app/hooks/react-query/useFileViolations';
import { MatchStatus } from '@/app/actions/violationActions';
import { useEffect, useState } from 'react';

type UpdateStatusHandler = (id: number, status: MatchStatus) => Promise<boolean>;

const STATUSES_IN_WORK = ['COMPLAINT_IN_WORK', 'LEGAL_IN_WORK', 'COMPLAINT_AND_LEGAL_IN_WORK'];

type TabType = 'complaint' | 'legal'

export default function FilePageViolationInfoTabs({ selectedViolation, updateStatusHandler }: { selectedViolation: ViolationFileDetail, updateStatusHandler: UpdateStatusHandler }) {
	const [activeTab, setActiveTab] = useState<TabType>('complaint');
	const [showTabs, setShowTabs] = useState(false);
	const isInWork = STATUSES_IN_WORK.includes(selectedViolation.status);

	useEffect(() => {
		console.log(selectedViolation.status);
	}, [selectedViolation]);

	useEffect(() => {
		setShowTabs(false);
	}, [selectedViolation.id]);

	if (!isInWork && !showTabs) {
		return (
			<div className="violation-info-choice">
				<h4>Вы можете</h4>
				<div className="violation-info-choice-buttons">
					<button
						className="btn btn-primary"
						onClick={() => {
							setShowTabs(true);
							setActiveTab('complaint');
						}}
					>
						Подать жалобу
					</button>

					<span>
						или
					</span>

					<button
						className="btn btn-primary"
						onClick={() => {
							setShowTabs(true);
							setActiveTab('legal');
						}}
					>
						Подать притензию
					</button>
				</div>
			</div>
		);
	}

	return (
		<div className="violation-info-tabs-wrapper">
			<div className="violation-info-tabs">
				<button
					className={`btn btn-primary ${activeTab === 'complaint' ? 'active' : ''}`}
					onClick={() => setActiveTab('complaint')}
				>
					{selectedViolation.status === 'COMPLAINT_IN_WORK' || selectedViolation.status === 'COMPLAINT_AND_LEGAL_IN_WORK' ? 'Жалоба': 'Подать жалобу'}
				</button>
				<button
					className={`btn btn-primary ${activeTab === 'legal' ? 'active' : ''}`}
					onClick={() => setActiveTab('legal')}
				>
					{selectedViolation.status === 'LEGAL_IN_WORK' || selectedViolation.status === 'COMPLAINT_AND_LEGAL_IN_WORK' ? 'Претензия': 'Подать претензию'}
				</button>
			</div>
			<div className="violation-info-content">
				{activeTab === 'complaint' && (
					<CaseComplaint
						key={"complaint_" + selectedViolation.id}
						selectedViolation={selectedViolation}
						updateStatusHandler={updateStatusHandler}
					/>
				)}
				{activeTab === 'legal' && (
					<CaseLegal
						key={"legal_" + selectedViolation.id}
						selectedViolation={selectedViolation}
						updateStatusHandler={updateStatusHandler}
					/>
				)}
			</div>
		</div>
	);
}