import { useCallback, useState } from 'react';
import { ChannelTextarea } from './ChannelTextarea';
import { Messages } from './Messages';
import { TypingUsers } from './TypingUsers';
import styles from './ChannelChatLayout.module.css';

interface ChannelChatLayoutProps {
	channelId: string;
}

interface ReplyState {
	eventId: string;
	username: string;
}

export function ChannelChatLayout({ channelId }: ChannelChatLayoutProps) {
	const [replyTo, setReplyTo] = useState<ReplyState | null>(null);

	const handleReply = useCallback((eventId: string, username: string) => {
		setReplyTo({ eventId, username });
	}, []);

	const handleCancelReply = useCallback(() => {
		setReplyTo(null);
	}, []);

	return (
		<div className={styles.container}>
			<div className={styles.messagesWrapper}>
				<Messages channelId={channelId} onReply={handleReply} />
			</div>
			<div className={styles.inputArea}>
				<TypingUsers channelId={channelId} />
				<ChannelTextarea channelId={channelId} replyTo={replyTo} onCancelReply={handleCancelReply} />
			</div>
		</div>
	);
}