import { Stack, Text } from '@mantine/core';
import { DataTable, MessagesColumns } from 'components';
import { useQueryAPI } from 'hooks';
import { useEffect, useState } from 'react';
import { textClasses } from 'styles';
const MessageSettings = () => {
	const endpoint = 'api/messages';
	const {
		data: messageData,
		isFetching: isMessagesFetching,
		isFetched: isMessagesFetched,
		isLoading: isMessagesLoading,
	} = useQueryAPI({
		endpoint: 'api/messages',
	});
	const [messages, setMessages] = useState<any>([]);

	useEffect(() => {
		if (messageData && isMessagesFetched) {
			setMessages(messageData);
		}
	}, [messageData, isMessagesFetched]);

	return (
		<Stack>
			<Text className={textClasses.settingsSubTitle} classNames={textClasses}>
				Messages
			</Text>
			<DataTable
				tableName='Messages'
				columns={MessagesColumns()}
				tableData={messages}
				isFetching={isMessagesFetching}
				isLoading={isMessagesLoading}
				endpoint={endpoint}
			/>
		</Stack>
	);
};
export default MessageSettings;