import moment from "moment";

function Timeline({ data }) {
	const date = data && [...new Set(data.map((e) => moment(e.createdAt).format("DD MMMM YYYY")))];
	return (
		<ul className="timeline-alt">
			{data &&
				date.map((value) => (
					<>
						<li className="timeline-separator" data-datetime={value}></li>
						{data
							.filter((e) => moment(e.createdAt).format("DD MMMM YYYY") === value)
							.map((data, i) => (
								<>
									<li className={data.role === "PT" ? "timeline-inverted" : ""}>
										<div className={`timeline-badge ${data.role === "PT" ? " danger" : "info"}`}>
											<em className={`fas fa-${data.role === "PT" ? "graduation-cap" : "file"}`}></em>
										</div>

										<div className="timeline-card">
											<div className="popover right">
												<div className="arrow"></div>
												<div className="popover-body">
													<div className="d-flex align-items-center mb-3">
														<img className="mr-3 rounded-circle thumb48" src={`/static/img${data.role === "PT" ? "/univ-avatar.png" : "/logo-single.png"}`} alt="Avatar" />
														<p className="m-0">
															<strong>{data.role_name}</strong>
															<br />
															{data.description}
															<br />
															<p className="text-muted">{moment(data.createdAt).format("hh:mm")}</p>
														</p>
													</div>
													{data.data.files && (
														<>
															<p className="text-muted my-2">Dokumen</p>
															{data.data.files.map((e) => (
																<div className="media bb p-2">
																	<div className="media-body">
																		<p className="m-0">
																			<a href={`data:${e.type};base64, ${Buffer.from(e.data).toString("base64")}`} download={e.name}>
																				<strong>{e.name}</strong>
																			</a>
																		</p>
																	</div>
																</div>
															))}
														</>
													)}
												</div>
											</div>
										</div>
									</li>
								</>
							))}
					</>
				))}

			<li className="timeline-end">
				<a className="timeline-badge">
					<em className="fa fa-plus"></em>
				</a>
			</li>
		</ul>
	);
}

export default Timeline;