'use client';

import { useEffect, useState } from 'react';
import { createPortal } from 'react-dom';
import { CryptoProvider } from '@/contexts/cryptoProvider';
import CryptoDashboard from './CryptoDashboard';
import CryptoSidebar from './CryptoSidebar';
import PopupModal from '@/app/component/PopupModal';
import Styles from '@/app/styles/common.module.scss';
import type { TickerRestData } from '@/types/crypto';

type Props = {
	initialTickers: TickerRestData[];
};

export default function CryptoPageContent({ initialTickers }: Props) {
	const [containerEl, setContainerEl] = useState<HTMLElement | null>(null);

	useEffect(() => {
		setContainerEl(document.getElementById('container'));
		return () => setContainerEl(null);
	}, []);

	return (
		<CryptoProvider>
			<PopupModal position='main' />
			<CryptoDashboard />
			{containerEl && createPortal(
				<aside id='aside' className={Styles.aside}>
					<CryptoSidebar initialTickers={initialTickers} />
				</aside>,
				containerEl
			)}
		</CryptoProvider>
	);
}