From 027200723cf268e5be97ea950819f56f1efa9bc1 Mon Sep 17 00:00:00 2001
From: Filip Chalupa <chalupa.filip@gmail.com>
Date: Tue, 18 Jun 2024 20:53:25 +0200
Subject: [PATCH] Control panel: add base for custom time adjustment form

---
 components/ControlPanel.module.css |  8 +++
 components/ControlPanel.tsx        | 85 ++++++++++++++++++++++++------
 2 files changed, 78 insertions(+), 15 deletions(-)
 create mode 100644 components/ControlPanel.module.css

diff --git a/components/ControlPanel.module.css b/components/ControlPanel.module.css
new file mode 100644
index 0000000..8784840
--- /dev/null
+++ b/components/ControlPanel.module.css
@@ -0,0 +1,8 @@
+.multibutton {
+	display: flex;
+	gap: 0.5em;
+}
+
+.growContent {
+	flex-grow: 1;
+}
diff --git a/components/ControlPanel.tsx b/components/ControlPanel.tsx
index 09e2010..92eacde 100644
--- a/components/ControlPanel.tsx
+++ b/components/ControlPanel.tsx
@@ -46,6 +46,7 @@ import {
 	toggleShowHours,
 } from '../utilities/roomState'
 import { useRoomState } from '../utilities/useRoomState'
+import styles from './ControlPanel.module.css'
 import { Countdown } from './Countdown'
 import { IdSpecificThemeProvider } from './IdSpecificThemeProvider'
 import { InvisibleTimeInput } from './InvisibleTimeInput'
@@ -53,6 +54,7 @@ import { CastButton } from './chromecast/sender/components/CastButton'
 import { useIsChromecastSenderAvailable } from './chromecast/sender/useIsChromecastAvailable'
 
 const messageFormId = 'messageForm'
+const customTimeAdjustmentFormId = 'customTimeAdjustmentForm'
 const customDateFormId = 'customDateForm'
 
 interface ControlPanelProps {
@@ -136,6 +138,8 @@ export const ControlPanel: React.FunctionComponent<ControlPanelProps> = ({
 
 	const isChromecastAvailable = useIsChromecastSenderAvailable()
 
+	const [customTime, setCustomTime] = React.useState('')
+
 	const [isExperimentalAllowed, setIsExperimentalAllowed] =
 		useStorageBackedState(false, 'experimental')
 
@@ -163,6 +167,13 @@ export const ControlPanel: React.FunctionComponent<ControlPanelProps> = ({
 					})
 				}}
 			/>
+			<form
+				id={customTimeAdjustmentFormId}
+				onSubmit={(event) => {
+					event.preventDefault()
+					// @TODO
+				}}
+			/>
 			<Box paddingTop={4} paddingBottom={4}>
 				<Container>
 					<Card elevation={4}>
@@ -285,31 +296,75 @@ export const ControlPanel: React.FunctionComponent<ControlPanelProps> = ({
 													sign * preset,
 												)
 											}}
+											startIcon={sign === -1 ? <RemoveIcon /> : <AddIcon />}
 											variant="outlined"
 											color={sign === -1 ? 'error' : 'success'}
 											fullWidth
 											size="large"
 										>
-											{sign === -1 ? '-' : '+'}
-											{preset >= 60 ? (
-												<>
-													{preset / 60}{' '}
-													{isLarge
-														? preset === 1
-															? 'minute'
-															: 'minutes'
-														: 'min'}
-												</>
-											) : (
-												<>
-													{preset} {isLarge ? 'seconds' : 'sec'}
-												</>
-											)}
+											<span className={styles.growContent}>
+												{preset >= 60 ? (
+													<>
+														{preset / 60}{' '}
+														{isLarge
+															? preset === 1
+																? 'minute'
+																: 'minutes'
+															: 'min'}
+													</>
+												) : (
+													<>
+														{preset} {isLarge ? 'seconds' : 'sec'}
+													</>
+												)}
+											</span>
 										</Button>
 									</Grid>
 								))}
 							</React.Fragment>
 						))}
+						<Grid item xs={6} md={3} lg={2}>
+							<TextField
+								label="Custom adjustment"
+								value={customTime}
+								inputProps={{
+									form: customTimeAdjustmentFormId,
+								}}
+								onChange={(event) => {
+									setCustomTime(event.target.value)
+								}}
+								size="small"
+								fullWidth
+								required
+								InputLabelProps={{
+									shrink: true,
+								}}
+							/>
+						</Grid>
+						<Grid item xs={6} md={3} lg={2}>
+							<div className={styles.multibutton}>
+								<Button
+									variant="outlined"
+									type="submit"
+									form={customTimeAdjustmentFormId}
+									color="error"
+									size="large"
+									fullWidth
+								>
+									<RemoveIcon />
+								</Button>
+								<Button
+									variant="outlined"
+									type="submit"
+									form={customTimeAdjustmentFormId}
+									color="success"
+									size="large"
+									fullWidth
+								>
+									<AddIcon />
+								</Button>
+							</div>
+						</Grid>
 					</Grid>
 					<Box paddingBottom={4} />
 					<Grid container spacing={2}>