import * as React from "react";
import { Event, User } from "@repo/db";
import { Html, Button, render } from "@react-email/components";
import { Badge } from "./Badge";

const styles = `
  * {
    box-sizing: border-box;
  }

  body {
    margin: 0;
    padding: 0;
  }

  a[x-apple-data-detectors] {
    color: inherit !important;
    text-decoration: inherit !important;
  }

  #MessageViewBody a {
    color: inherit;
    text-decoration: none;
  }

  p {
    line-height: inherit;
  }

  .desktop_hide,
  .desktop_hide table {
    mso-hide: all;
    display: none;
    max-height: 0px;
    overflow: hidden;
  }

  .image_block img + div {
    display: none;
  }

  sup,
  sub {
    font-size: 75%;
    line-height: 0;
  }

  .menu_block.desktop_hide .menu-links span {
    mso-hide: all;
  }

  @media (max-width: 700px) {
    .desktop_hide table.icons-inner {
      display: inline-block !important;
    }

    .icons-inner {
      text-align: center;
    }

    .icons-inner td {
      margin: 0 auto;
    }
  }
`;

const Template = ({ event, user }: { user: User; event: Event }) => (
	<Html lang="de">
		<meta content="text/html; charset=utf-8" httpEquiv="Content-Type" />
		<meta content="width=device-width, initial-scale=1.0" name="viewport" />
		<link
			href="https://fonts.googleapis.com/css?family=Montserrat"
			rel="stylesheet"
			type="text/css"
		/>
		<style>{styles}</style>
		<body style={{ backgroundColor: "#FFFFFF", margin: 0, padding: 0 }}>
			<table width="100%">
				<tbody>
					<tr>
						<td>
							<table
								align="center"
								width="680"
								style={{ margin: "0 auto", color: "#000000" }}
							>
								<tbody>
									<tr>
										<td style={{ textAlign: "center", paddingTop: "30px" }}>
											<img
												src={`${process.env.HUB_URL}/mail/var_logo.png`}
												alt="Logo"
												width="80"
												style={{ display: "block", margin: "0 auto" }}
											/>
										</td>
									</tr>
									<tr>
										<td
											style={{
												textAlign: "center",
												fontSize: "46px",
												color: "#011936",
											}}
										>
											<strong>Glückwunsch!</strong>
										</td>
									</tr>
									<tr>
										<td
											style={{
												textAlign: "center",
												fontSize: "30px",
												color: "#011936",
											}}
										>
											Du hast den Kurs <strong>{event.name}</strong>{" "}
											abgeschlossen!
										</td>
									</tr>
									<tr>
										<td style={{ textAlign: "center", padding: "20px" }}>
											{event.finishedBadges.map((badge) => (
												<Badge badge={badge} />
											))}
										</td>
									</tr>
									<tr>
										<td
											style={{
												textAlign: "center",
												fontSize: "18px",
												color: "#011936",
											}}
										>
											Mit dem Abschluss von Kursen verdienst du dir nach und
											nach immer mehr Badges.
										</td>
									</tr>
									<tr>
										<td style={{ textAlign: "center", paddingTop: "20px" }}>
											<a
												href="https://your-platform.com"
												style={{
													padding: "10px",
													textDecoration: "none",
													borderRadius: "20px",
													color: "#011936",
												}}
											>
												Impressum
											</a>
											<span style={{ margin: "0 10px" }}>|</span>
											<a
												href="https://your-platform.com"
												style={{
													padding: "10px",
													textDecoration: "none",
													borderRadius: "20px",
													color: "#011936",
												}}
											>
												Datenschutzerklärung
											</a>
											<span style={{ margin: "0 10px" }}>|</span>
											<a
												href="https://your-platform.com"
												style={{
													padding: "10px",
													textDecoration: "none",
													borderRadius: "20px",
													color: "#011936",
												}}
											>
												Knowledgebase
											</a>
										</td>
									</tr>
								</tbody>
							</table>
						</td>
					</tr>
				</tbody>
			</table>
		</body>
	</Html>
);

export function renderCourseCompleted({
	user,
	event,
}: {
	user: User;
	event: Event;
}) {
	return render(<Template event={event} user={user} />);
}
