import { createPortal } from 'react-dom';
import { useParams } from 'react-router-dom';
import { useAuth } from '../app/context/AuthProvider';
import RealtimeTable from '../components/RealtimeTable';
import { RealtimeProvider } from '../components/RealtimeTable/contexts/RealtimeContext';
import { BackButton } from '../components/common/Buttons/BackButton';
import { NameTask, TaskInfoContainer } from '../components/common/SwitchFormTask/SwitchFormTask.style';
import { DIRECTION_TRANSLATE, SHEET_NAME } from '../constants/constants';

const TableInfo = ({ formId, sheetName, direction, isProject = false }) => {
	const path = (isProject ? '/project/' : '/task/') + formId;
	const tableName = SHEET_NAME[sheetName] || sheetName;
	const directionName = DIRECTION_TRANSLATE[direction] || direction;
	const portalContent = (
		<TaskInfoContainer>
			<BackButton to={path} />
			{sheetName && (
				<NameTask>
					{tableName}
					{directionName ? ` — ${directionName}` : ''}
				</NameTask>
			)}
		</TaskInfoContainer>
	);

	const targetElement = document.getElementById('TableInfo');

	if (targetElement) {
		return createPortal(portalContent, targetElement);
	}
};

export default function NewTablePage() {
	const { formId, formType, sheetName, direction, year } = useParams();
	const { user } = useAuth();
	const isProject = formType === 'PROJECT';
	const normalizedDirection = direction === 'null' ? null : direction;

	return (
		<>
			{formId && <TableInfo formId={formId} sheetName={sheetName} direction={normalizedDirection} isProject={isProject} />}
			{user && (
				<RealtimeProvider
					formId={formId}
					sheetName={sheetName}
					userId={user.id}
					direction={normalizedDirection}
					isProject={isProject}
					year={year}>
					<RealtimeTable
						formType={formType}
						formId={formId}
						sheetName={sheetName}
						direction={normalizedDirection}
						year={year}
					/>
				</RealtimeProvider>
			)}
		</>
	);
}