import { Dialog } from "../Dialog/Dialog";
import Lottie from "lottie-react";
import animationData from './lottie.json';
import { Box, Flex, Skeleton, Text } from "@mantine/core";
import { useDialogsList } from "@/app/providers/DialogListProvider/useDialogsList";
import { GroupDialog } from "../GroupDialog/GroupDialog";
import React from "react";

interface DialogsListProps {
	mode: 'all' | 'requests';
	onSelectDialog: (publicKey: string) => void;
}

export function DialogsList(props : DialogsListProps) {
	const {dialogs, loadingDialogs} = useDialogsList();

	return (
		<>
			{loadingDialogs === 0 && dialogs.filter(v => (v.is_request == (props.mode == 'requests'))).length <= 0 && (
				<Flex align={'center'} mt={100} direction={'column'} justify={'center'}>
					<Lottie style={{
						width: 90,
						height: 90
					}} loop={true} animationData={animationData}></Lottie>
					<Text mt={'sm'} c={'dimmed'} fz={13}>
						Write to someone
					</Text>
				</Flex>
			)}
			{loadingDialogs > 0 && (
				<>
					{Array.from({ length: loadingDialogs }).map((_, index) => (
						<Box w={'100%'} h={74} key={index}>
							<Skeleton height={74} radius={0} mb={index == loadingDialogs - 1 ? 0 : 1} />
						</Box>
					))}				
				</>
			)}
			{loadingDialogs === 0 && dialogs.filter(v => (v.is_request == (props.mode == 'requests'))).map((dialog) => (
				<React.Fragment key={dialog.dialog_id}>
					{dialog.dialog_id.startsWith('#group:') ? (
						<GroupDialog
							onClickDialog={props.onSelectDialog}
							{...dialog}
						/>
					) : (
						<Dialog
							onClickDialog={props.onSelectDialog}
							{...dialog}
						/>
					)}
				</React.Fragment>
			))}
		</>
	);
}