import React, { useEffect, useState } from 'react';
import { Panel, Placeholder, Loader } from 'rsuite';

import { NavBar, MeetingList } from '../components';

import './styles/layout.less';
import { backend } from '../helpers/http-common';

const { Paragraph } = Placeholder;

export default function Dashboard({ currentUser }) {
	const [meetings, setMeetings] = useState([]);
	const [confirmed, setConfirmed] = useState();
	const [unconfirmed, setUnconfirmed] = useState();
	const [loading, setLoading] = useState(true);

	useEffect(() => {
		backend
			.get(`/accounts/${currentUser.id}/meetings`)
			.then((response) => {
				const allMeetings = response.data;

				const confirmed = allMeetings.filter(
					(meeting) => meeting.start_time,
				);
				const unconfirmed = allMeetings.filter(
					(meeting) => !meeting.start_time,
				);

				setConfirmed(confirmed);
				setUnconfirmed(unconfirmed);
				setMeetings(allMeetings);
				setLoading(false);
			})
			.catch((error) => console.log(error));
	}, []);

	return (
		<>
			<NavBar title='Dashboard' />
			{loading ? (
				<Panel className={'app-container-small'}>
					<h2>Invitations</h2>
					<h4>Confirmed</h4>
					<Paragraph style={{ marginTop: 30 }} graph='square'>
						<Loader backdrop content='loading...' vertical />
					</Paragraph>
					<h4>To confirm</h4>
					<Paragraph style={{ marginTop: 30 }} graph='square'>
						<Loader backdrop content='loading...' vertical />
					</Paragraph>
				</Panel>
			) : (
				<Panel className={'app-container-small'}>
					<h2>Invitations</h2>
					{confirmed && (
						<MeetingList
							meetings={confirmed}
							status={'Confirmed'}
						/>
					)}
					{unconfirmed && (
						<MeetingList
							meetings={unconfirmed}
							status={'To confirm'}
						/>
					)}
					{meetings.length === 0 && <p>You have no meetings.</p>}
				</Panel>
			)}
		</>
	);
}