From 8cb9602c8726a24b6215ccd1114e85158dc187fa Mon Sep 17 00:00:00 2001
From: jerembdn <work@jeremybdn.fr>
Date: Mon, 20 May 2024 19:18:11 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=A7=20start=20html=20to=20image?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env.development                              |  2 +
 .../product/previsualization/card/index.tsx   | 12 +--
 .../product/previsualization/index.tsx        | 74 ++++++++++++++++---
 3 files changed, 71 insertions(+), 17 deletions(-)

diff --git a/.env.development b/.env.development
index 78f0acc..ee4f506 100644
--- a/.env.development
+++ b/.env.development
@@ -1 +1,3 @@
 YOUTUBE_API_KEY=YOUR_API_KEY
+
+NEXT_PUBLIC_GA_MEASUREMENT_ID="UNKNOWN"
diff --git a/src/components/product/previsualization/card/index.tsx b/src/components/product/previsualization/card/index.tsx
index cad4e7b..041836f 100644
--- a/src/components/product/previsualization/card/index.tsx
+++ b/src/components/product/previsualization/card/index.tsx
@@ -1,5 +1,5 @@
 import type { Video } from "@/types/video";
-import type React from "react";
+import React from "react";
 import { isActiveWidgets, type Display, type Widget } from "../..";
 import { css, cx } from "@styled-system/css";
 import Image from "@/components/ui/image";
@@ -25,10 +25,10 @@ type PrevisualizationCardProps = {
 	};
 };
 
-const PrevisualizationCard: React.FC<PrevisualizationCardProps> = ({
-	video,
-	options,
-}: PrevisualizationCardProps) => {
+const PrevisualizationCard = React.forwardRef<
+	HTMLDivElement,
+	PrevisualizationCardProps
+>(({ video, options }: PrevisualizationCardProps) => {
 	const buildFooter = () => {
 		const viewsCount =
 			isActiveWidgets(options.activeWidgets, "videoViews") && video.viewsCount;
@@ -177,6 +177,6 @@ const PrevisualizationCard: React.FC<PrevisualizationCardProps> = ({
 			</div>
 		</motion.div>
 	);
-};
+});
 
 export default PrevisualizationCard;
diff --git a/src/components/product/previsualization/index.tsx b/src/components/product/previsualization/index.tsx
index 018465e..4df3777 100644
--- a/src/components/product/previsualization/index.tsx
+++ b/src/components/product/previsualization/index.tsx
@@ -5,16 +5,55 @@ import PrevisualizationCard from "./card";
 import { defaultOptions, defaultVideo } from "@/constants/default-video";
 import type { Widget } from "..";
 import Select from "@/components/ui/select";
+import { useForm } from "react-hook-form";
+import React from "react";
 
 type ProductPrevisualizationProps = {
 	className?: string;
 	activeWidgets: Widget[];
 };
 
+type FormData = {
+	format: "png" | "jpg" | "webp";
+	size: "0.5" | "0.75" | "1" | "1.5" | "2" | "3";
+};
+
 const ProductPrevisualization: React.FC<ProductPrevisualizationProps> = ({
 	className,
 	activeWidgets,
 }: ProductPrevisualizationProps) => {
+	const ref = React.useRef<HTMLDivElement>(null);
+
+	const { register, handleSubmit } = useForm<FormData>({
+		defaultValues: {
+			format: "png",
+			size: "1",
+		},
+	});
+
+	// Un truc dans l'idée tu capte jsp j'pense bref azy
+	const onSubmit = handleSubmit(({ format, size }: FormData) => {
+		console.log("Data", format, size);
+
+		//TODO: html to image and return image
+
+		return "caca";
+	});
+
+	const handleDownload = () => {
+		const image = onSubmit();
+		console.log("Download image", image);
+		if (ref.current) {
+		}
+	};
+
+	const handleCopy = () => {
+		if (ref.current) {
+			const image = onSubmit();
+			console.log("Copy image", image);
+		}
+	};
+
 	return (
 		<div
 			className={cx(
@@ -62,6 +101,7 @@ const ProductPrevisualization: React.FC<ProductPrevisualizationProps> = ({
 				})}
 			>
 				<PrevisualizationCard
+					ref={ref}
 					video={defaultVideo}
 					options={{
 						...defaultOptions,
@@ -70,7 +110,7 @@ const ProductPrevisualization: React.FC<ProductPrevisualizationProps> = ({
 				/>
 			</div>
 
-			<div
+			<form
 				className={css({
 					position: "absolute",
 					width: "100%",
@@ -87,34 +127,46 @@ const ProductPrevisualization: React.FC<ProductPrevisualizationProps> = ({
 				})}
 			>
 				<Select
+					{...register("size")}
 					className={css({
 						width: "max-content",
 					})}
 				>
-					<option>1x</option>
-					<option>2x</option>
-					<option>3x</option>
-					<option>Puff</option>
+					<option value={"0.5"}>0.5x</option>
+					<option value={"0.75"}>0.75x</option>
+					<option value={"1"}>1x</option>
+					<option value={"1.5"}>1.5x</option>
+					<option value={"2"}>2x</option>
+					<option value={"3"}>3x</option>
 				</Select>
 
 				<Select
+					{...register("format")}
 					className={css({
 						width: "max-content",
 					})}
 				>
-					<option>PNG</option>
-					<option>JPG</option>
-					<option>WEBP</option>
+					<option value={"png"}>PNG</option>
+					<option value={"jpg"}>JPG</option>
+					<option value={"webp"}>WEBP</option>
 				</Select>
 
-				<Button prefix={<Icon icon="download" size={16} />} color="secondary">
+				<Button
+					prefix={<Icon icon="download" size={16} />}
+					color="secondary"
+					onClick={handleDownload}
+				>
 					Télécharger
 				</Button>
 
-				<Button prefix={<Icon icon="copy" size={16} />} withoutBorder>
+				<Button
+					prefix={<Icon icon="copy" size={16} />}
+					withoutBorder
+					onClick={handleCopy}
+				>
 					Copier
 				</Button>
-			</div>
+			</form>
 		</div>
 	);
 };