From 7b90669e6fe1c5aa141f46510dee177a2963559b Mon Sep 17 00:00:00 2001
From: nmpereira <nikhilpereira25@gmail.com>
Date: Tue, 3 Oct 2023 21:48:03 -0400
Subject: [PATCH] make custom timer input pretty

---
 .../Controls/TimerControls.styled.tsx         | 14 ++++++
 src/components/Controls/TimerForm.tsx         | 48 ++++++++++++++-----
 2 files changed, 49 insertions(+), 13 deletions(-)

diff --git a/src/components/Controls/TimerControls.styled.tsx b/src/components/Controls/TimerControls.styled.tsx
index 272329d..3982b13 100644
--- a/src/components/Controls/TimerControls.styled.tsx
+++ b/src/components/Controls/TimerControls.styled.tsx
@@ -57,3 +57,17 @@ export const TimerFormContainer = styled.div<{
 	width: 100%;
 	height: 100%;
 `;
+
+export const StyledRowDiv = styled.div`
+	display: flex;
+	flex-direction: row;
+	justify-content: center;
+	align-items: center;
+	width: 100%;
+	gap: 20px;
+	margin-top: 20px;
+
+	@media (max-width: 300px), (max-height: 600px) {
+		display: none;
+	}
+`;
diff --git a/src/components/Controls/TimerForm.tsx b/src/components/Controls/TimerForm.tsx
index 1197eb2..dd98315 100644
--- a/src/components/Controls/TimerForm.tsx
+++ b/src/components/Controls/TimerForm.tsx
@@ -1,7 +1,9 @@
-import React, { useEffect, useState } from "react";
+import React, { useState } from "react";
 import socket from "../Socket/socket";
 import { roomName } from "../../../common/common";
-import { TimerFormContainer } from "./TimerControls.styled";
+import { StyledRowDiv, TimerFormContainer } from "./TimerControls.styled";
+import { StyledButton } from "../Button/Button";
+import ValidationInput from "../Modal/ValidationInput";
 
 interface TimerFormProps {
 	isLoaded: boolean;
@@ -28,21 +30,41 @@ const TimerForm = (props: TimerFormProps): JSX.Element => {
 		console.log("Magic mode enabled");
 	};
 
-	useEffect(() => {
-		console.log("isLoaded", isLoaded);
-	}, [isLoaded]);
+	const inputValidation = (input: string): string | false => {
+		const parsedInput = parseInt(input);
+
+		if (parsedInput < 0) {
+			return "Please enter a positive number";
+		}
+
+		if (parsedInput > 999999999999) {
+			return "Please enter a number less than 999999999999";
+		}
+
+		return false;
+	};
 
 	return (
 		<TimerFormContainer isVisibile={debugMode} isLoaded={isLoaded}>
 			<form onSubmit={onSubmit}>
-				<input
-					onChange={(e): void => setValue(e.target.value)}
-					value={value}
-					type="number"
-					placeholder="Enter something"
-				/>
-
-				<button type="submit">Submit</button>
+				<StyledRowDiv>
+					<ValidationInput
+						type="number"
+						id="custom-timer"
+						placeholder="Enter a custom timer duration"
+						value={value}
+						validationText={inputValidation(value)}
+						onChange={(e): void => setValue(e.target.value)}
+						onKeyDown={(): void => {}}
+					/>
+
+					<StyledButton
+						type="submit"
+						disabled={inputValidation(value) !== false}
+					>
+						Submit
+					</StyledButton>
+				</StyledRowDiv>
 			</form>
 		</TimerFormContainer>
 	);