import React from 'react';
import { List, FlexboxGrid, Icon } from 'rsuite';

export default function MeetingList({ meetings, status }) {
	return (
		<>
			<h4>{status}</h4>

			<List hover>
				{meetings.map((meeting) => (
					<a href={`/meetings/${meeting.id}`}>
						<List.Item key={meeting.id} bordered>
							<FlexboxGrid>
								{/* Icon */}
								<FlexboxGrid.Item
									colspan={2}
									style={styleCenter}
								>
									<Icon
										icon={
											meeting.start_time !== null
												? 'calendar-check-o'
												: 'calendar-o'
										}
										style={{
											color: 'darkgrey',
											fontSize: '1.5em',
										}}
									/>
								</FlexboxGrid.Item>

								{/*Meeting info*/}
								<FlexboxGrid.Item
									colspan={6}
									style={{
										...styleCenter,
										flexDirection: 'column',
										alignItems: 'flex-start',
										overflow: 'hidden',
									}}
								>
									<div style={titleStyle}>
										{meeting.title}
									</div>
									{meeting.start_time !== null && (
										<>{meeting.start_time}</>
									)}
								</FlexboxGrid.Item>
							</FlexboxGrid>
						</List.Item>
					</a>
				))}
			</List>
		</>
	);
}

// TODO move to a less file
const styleCenter = {
	display: 'flex',
	justifyContent: 'center',
	alignItems: 'center',
	height: '60px',
};

const titleStyle = {
	paddingBottom: 5,
	whiteSpace: 'nowrap',
	fontWeight: 500,
};