import { FC, useEffect } from 'react';
import { cn } from '../../../lib/cn';
import { useParams, Navigate, Routes, Route } from 'react-router-dom';
import { useAppDispatch, useAppSelector } from '../../../redux/hooks';
import { fetchGroupById } from '../../../redux/slices/groups';
import GroupMenu from './GroupMenu';
import { Posts } from './posts/Posts';
import { Chat } from './chat/Chat';
import { Contests } from './contests/Contests';

interface GroupsBlockProps {}

const Group: FC<GroupsBlockProps> = () => {
    const groupId = Number(useParams<{ groupId: string }>().groupId);
    if (!groupId) {
        return <Navigate to="/home/groups" replace />;
    }

    const dispatch = useAppDispatch();
    const group = useAppSelector((state) => state.groups.fetchGroupById.group);

    useEffect(() => {
        dispatch(fetchGroupById(groupId));
    }, [groupId]);

    return (
        <div
            className={cn(
                ' h-screen w-full text-liquid-white p-[20px] flex gap-[20px] flex-col',
            )}
        >
            <div className="font-bold text-[40px]">{group?.name}</div>

            <GroupMenu groupId={groupId} />

            <Routes>
                <Route path="home" element={<Posts groupId={groupId} />} />
                <Route path="chat" element={<Chat groupId={groupId} />} />
                <Route path="contests" element={<Contests />} />
                <Route
                    path="*"
                    element={<Navigate to={`/group/${groupId}/home`} />}
                />
            </Routes>
        </div>
    );
};

export default Group;