import { DragDropContext } from '@hello-pangea/dnd';
import { Button, Flex, ScrollArea } from '@radix-ui/themes';
import {
	useCreateProjectMutation,
	useGetProjectsQuery
} from '../../services/mainApi';
import CardGroup from '../CardGroup/CardGroup';
import CreateProjectDialog from '../dialogs/CreateProjectDialog/CreateProjectDialog';

export default function MainBoard() {
	const dragEndHandle = (result: TDragResult) => {
		result;
	};

	const [createProject] = useCreateProjectMutation();
	const { data: cringe, isLoading } = useGetProjectsQuery({});

	return (
		<>
			<DragDropContext onDragEnd={dragEndHandle}>
				<ScrollArea scrollbars="horizontal" className="pb-3">
					<Flex gap={'2'} className="min-w-fit">
						{!isLoading &&
							(cringe as any[]).map((item: any) => (
								<CardGroup id={item.id} title={item.title} />
							))}
					</Flex>
				</ScrollArea>
			</DragDropContext>

			<CreateProjectDialog onCreate={createProject}>
				<Button>Create project</Button>
			</CreateProjectDialog>
		</>
	);
}