import moment from "moment";

function Timeline({ data }) {
	const date = [...new Set(data.data.map((e) => moment(e.createdAt).format("DD MMMM YYYY")))];
	return (
		<ul className="timeline">
			{date.map((value) => (
				<>
					<li className="timeline-separator" data-datetime={value}></li>
					{data.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 info">
										<em className="far fa-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/user/admin.png" alt="Avatar" />
													<p className="m-0">
														<strong>{data.role}</strong>
														<br />
														{data.description}
													</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;