import { message } from 'antd';
import { useEffect, useState } from 'react';
import { useParams, useSearchParams } from 'react-router-dom';
import { ApiError } from '../api/client';
import PageTitle from '../components/PageTitle';
import { fetchOneCompanyGroup } from '../services/api/directories/company_groups';
import { setSelectedVersion } from '../store/slices/consolidations/consolidationsSlice';
import { getConsolidationsListThunk } from '../store/slices/consolidations/thunks';
import { useAppDispatch } from '../store/store';
import { ConsoleLegalEntitiesTable } from '../widgets/ConsoleLegalEntities/ConsoleLegalEntities';
import { ConsoleTableWidget } from '../widgets/ConsoleTable/ConsoleTable';
import { DocumentsDrawer } from '../widgets/FilesDrawer/FilesDrawer';

export function ConsolidationPage() {
	const [drawerOpen, setDrawerOpen] = useState(false);
	const { group_id } = useParams();
	const [searchParams] = useSearchParams();
	const versionParam = searchParams.get('version');
	const dispatch = useAppDispatch();

	const [comGroupName, setComGroupName] = useState('');
	const [locationPath, setLocationPath] = useState('Отчетность>');
	const [desc, setDesc] = useState('');

	useEffect(() => {
		if (!group_id) return;
		async function getAllInfo(id: string) {
			try {
				const data = await fetchOneCompanyGroup(id);
				setComGroupName(data.name);
				setLocationPath(`Отчетность>${data.name}>Консолидации`);
				setDesc(`${data.legal_entities_count} организаций`);
				await dispatch(getConsolidationsListThunk(id));
				if (versionParam) dispatch(setSelectedVersion(versionParam));
			} catch (e: unknown) {
				message.error(e instanceof ApiError ? e.message : 'Не удалось загрузить группу компаний');
			}
		}
		getAllInfo(group_id);
		return () => {
			dispatch(setSelectedVersion(null));
		};
	}, [dispatch, group_id, versionParam]);
	return (
		<div
			style={{
				padding: 12,
				display: 'flex',
				flexDirection: 'column',
				height: '100vh',
			}}>
			<PageTitle backable location={locationPath} header={comGroupName} description={desc} />
			<main
				style={{
					flex: '1 1 auto',
					minHeight: 0,
					overflow: 'auto',
					display: 'flex',
					flexDirection: 'column',
					gap: 10,
				}}>
				<div
					style={{
						flex: '2 1 0',
						backgroundColor: 'white',
						borderTopLeftRadius: 12,
						borderTopRightRadius: 12,
						overflowY: 'hidden',
						display: 'flex',
						flexDirection: 'column',
						minHeight: 0,
					}}>
					<ConsoleTableWidget />
				</div>
				<div
					style={{
						flex: '3 1 0',
						backgroundColor: 'white',
						borderTopLeftRadius: 12,
						borderTopRightRadius: 12,
						overflowY: 'hidden',
						display: 'flex',
						flexDirection: 'column',
						minHeight: 0,
					}}>
					<ConsoleLegalEntitiesTable
						onDrawerOpen={() => {
							setDrawerOpen(true);
						}}
					/>
				</div>
			</main>
			<DocumentsDrawer
				open={drawerOpen}
				onClose={() => {
					setDrawerOpen(false);
				}}
			/>
		</div>
	);
}