bitforum-frontend/app/component/crypto/CryptoDashboard.tsx

'use client';

import { useRef, useState, useCallback, useEffect } from 'react';
import { useCryptoContext } from '@/contexts/cryptoProvider';
import useMarketData from '@/hooks/useMarketData';
import useTradeSound from '@/hooks/useTradeSound';
import MarketHeader from './MarketHeader';
import TradingChart from './TradingChart';
import Orderbook from './Orderbook';
import TradeHistory from './TradeHistory';
import './dashboard.scss';

export default function CryptoDashboard() {
	const { selectedMarket } = useCryptoContext();
	useMarketData(selectedMarket);
	const tradeSound = useTradeSound();

	const [chartHeight, setChartHeight] = useState(500);
	const [orderbookRatio, setOrderbookRatio] = useState(50); // %
	const dashboardRef = useRef<HTMLDivElement>(null);
	const draggingRef = useRef<'chart' | 'split' | null>(null);
	const startRef = useRef({ y: 0, x: 0, value: 0 });

	const handleMouseDown = useCallback((type: 'chart' | 'split', e: React.MouseEvent) => {
		e.preventDefault();
		draggingRef.current = type;
		if (type === 'chart') {
			startRef.current = { y: e.clientY, x: 0, value: chartHeight };
		} else {
			startRef.current = { y: 0, x: e.clientX, value: orderbookRatio };
		}
		document.body.style.cursor = type === 'chart' ? 'row-resize' : 'col-resize';
		document.body.style.userSelect = 'none';
	}, [chartHeight, orderbookRatio]);

	useEffect(() => {
		const handleMouseMove = (e: MouseEvent) => {
			if (!draggingRef.current) return;

			if (draggingRef.current === 'chart') {
				const delta = e.clientY - startRef.current.y;
				const newHeight = Math.min(800, Math.max(200, startRef.current.value + delta));
				setChartHeight(newHeight);
			} else if (draggingRef.current === 'split' && dashboardRef.current) {
				const bottomEl = dashboardRef.current.querySelector('.dashboard-bottom') as HTMLElement;
				if (!bottomEl) return;
				const rect = bottomEl.getBoundingClientRect();
				const totalWidth = rect.width;
				const relX = e.clientX - rect.left;
				const ratio = Math.min(80, Math.max(20, (relX / totalWidth) * 100));
				setOrderbookRatio(ratio);
			}
		};

		const handleMouseUp = () => {
			if (draggingRef.current) {
				draggingRef.current = null;
				document.body.style.cursor = '';
				document.body.style.userSelect = '';
			}
		};

		document.addEventListener('mousemove', handleMouseMove);
		document.addEventListener('mouseup', handleMouseUp);
		return () => {
			document.removeEventListener('mousemove', handleMouseMove);
			document.removeEventListener('mouseup', handleMouseUp);
		};
	}, []);

	return (
		<div className='crypto-dashboard' ref={dashboardRef}>
			<MarketHeader />
			<div style={{ height: chartHeight }}>
				<TradingChart />
			</div>
			<div
				className='resize-handle-h'
				onMouseDown={(e) => handleMouseDown('chart', e)}
			/>
			<div className='dashboard-bottom'>
				<div className='dashboard-orderbook' style={{ width: `${orderbookRatio}%` }}>
					<Orderbook playOrderbookSound={tradeSound.playOrderbookSound} />
				</div>
				<div
					className='resize-handle-v'
					onMouseDown={(e) => handleMouseDown('split', e)}
				/>
				<div className='dashboard-trades' style={{ width: `${100 - orderbookRatio}%` }}>
					<TradeHistory tradeSound={tradeSound} />
				</div>
			</div>
		</div>
	);
}