From df7aadbec045be61fb5b56ced69c9fb338fd7498 Mon Sep 17 00:00:00 2001
From: amhsirak <karishmashuklaa@gmail.com>
Date: Mon, 6 Oct 2025 18:23:06 +0530
Subject: [PATCH] chore: move schedule modal to legacy

---
 legacy/src/ScheduleSettings.tsx | 314 ++++++++++++++++++++++++++++++++
 1 file changed, 314 insertions(+)
 create mode 100644 legacy/src/ScheduleSettings.tsx

diff --git a/legacy/src/ScheduleSettings.tsx b/legacy/src/ScheduleSettings.tsx
new file mode 100644
index 00000000..7a28d2dc
--- /dev/null
+++ b/legacy/src/ScheduleSettings.tsx
@@ -0,0 +1,314 @@
+import React, { useState, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import { GenericModal } from "../ui/GenericModal";
+import { MenuItem, TextField, Typography, Box } from "@mui/material";
+import { Dropdown } from "../ui/DropdownMui";
+import Button from "@mui/material/Button";
+import { validMomentTimezones } from '../../constants/const';
+import { useGlobalInfoStore } from '../../context/globalInfo';
+import { getSchedule, deleteSchedule } from '../../api/storage';
+
+interface ScheduleSettingsProps {
+  isOpen: boolean;
+  handleStart: (settings: ScheduleSettings) => Promise<boolean>;
+  handleClose: () => void;
+  initialSettings?: ScheduleSettings | null;
+}
+
+export interface ScheduleSettings {
+  runEvery: number;
+  runEveryUnit: string;
+  startFrom: string;
+  dayOfMonth?: string;
+  atTimeStart?: string;
+  atTimeEnd?: string;
+  timezone: string;
+}
+
+export const ScheduleSettingsModal = ({ isOpen, handleStart, handleClose, initialSettings }: ScheduleSettingsProps) => {
+  const { t } = useTranslation();
+  const [schedule, setSchedule] = useState<ScheduleSettings | null>(null);
+  const [settings, setSettings] = useState<ScheduleSettings>({
+    runEvery: 1,
+    runEveryUnit: 'HOURS',
+    startFrom: 'MONDAY',
+    dayOfMonth: '1',
+    atTimeStart: '00:00',
+    atTimeEnd: '01:00',
+    timezone: 'UTC'
+  });
+
+  useEffect(() => {
+    if (initialSettings) {
+      setSettings(initialSettings);
+    }
+  }, [initialSettings]);
+
+  const handleChange = (field: keyof ScheduleSettings, value: string | number | boolean) => {
+    setSettings(prev => ({ ...prev, [field]: value }));
+  };
+
+  const textStyle = {
+    width: '150px',
+    height: '52px',
+    marginRight: '10px',
+  };
+
+  const dropDownStyle = {
+    marginTop: '2px',
+    width: '150px',
+    height: '59px',
+    marginRight: '10px',
+  };
+
+  const units = [
+    'MINUTES',
+    'HOURS',
+    'DAYS',
+    'WEEKS',
+    'MONTHS'
+  ];
+
+  const days = [
+    'MONDAY',
+    'TUESDAY',
+    'WEDNESDAY',
+    'THURSDAY',
+    'FRIDAY',
+    'SATURDAY',
+    'SUNDAY'
+  ];
+
+  const { recordingId, notify } = useGlobalInfoStore();
+
+  const deleteRobotSchedule = () => {
+    if (recordingId) {
+      deleteSchedule(recordingId);
+      setSchedule(null);
+      notify('success', t('Schedule deleted successfully'));
+    } else {
+      console.error('No recording id provided');
+    }
+
+    setSettings({
+      runEvery: 1,
+      runEveryUnit: 'HOURS',
+      startFrom: 'MONDAY',
+      dayOfMonth: '',
+      atTimeStart: '00:00',
+      atTimeEnd: '01:00',
+      timezone: 'UTC'
+    });
+  };
+
+  const getRobotSchedule = async () => {
+    if (recordingId) {
+      const scheduleData = await getSchedule(recordingId);
+      setSchedule(scheduleData);
+    } else {
+      console.error('No recording id provided');
+    }
+  }
+
+  useEffect(() => {
+    if (isOpen) {
+      const fetchSchedule = async () => {
+        await getRobotSchedule();
+      };
+      fetchSchedule();
+    }
+  }, [isOpen]);
+
+  const getDayOrdinal = (day: string | undefined) => {
+    if (!day) return '';
+    const lastDigit = day.slice(-1);
+    const lastTwoDigits = day.slice(-2);
+
+    // Special cases for 11, 12, 13
+    if (['11', '12', '13'].includes(lastTwoDigits)) {
+      return t('schedule_settings.labels.on_day.th');
+    }
+
+    // Other cases
+    switch (lastDigit) {
+      case '1': return t('schedule_settings.labels.on_day.st');
+      case '2': return t('schedule_settings.labels.on_day.nd');
+      case '3': return t('schedule_settings.labels.on_day.rd');
+      default: return t('schedule_settings.labels.on_day.th');
+    }
+  };
+
+  return (
+    <GenericModal
+      isOpen={isOpen}
+      onClose={handleClose}
+      modalStyle={modalStyle}
+    >
+      <Box sx={{
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'flex-start',
+        padding: '20px',
+        '& > *': { marginBottom: '20px' },
+      }}>
+        <Typography variant="h6" sx={{ marginBottom: '20px' }}>{t('schedule_settings.title')}</Typography>
+        <>
+          {schedule !== null ? (
+            <>
+              <Typography>{t('schedule_settings.run_every')}: {schedule.runEvery} {schedule.runEveryUnit.toLowerCase()}</Typography>
+              <Typography>{['MONTHS', 'WEEKS'].includes(settings.runEveryUnit) ? t('schedule_settings.start_from') : t('schedule_settings.start_from')}: {schedule.startFrom.charAt(0).toUpperCase() + schedule.startFrom.slice(1).toLowerCase()}</Typography>
+              {schedule.runEveryUnit === 'MONTHS' && (
+                <Typography>{t('schedule_settings.on_day')}: {schedule.dayOfMonth}{getDayOrdinal(schedule.dayOfMonth)} of the month</Typography>
+              )}
+              <Typography>{t('schedule_settings.at_around')}: {schedule.atTimeStart}, {schedule.timezone} {t('schedule_settings.timezone')}</Typography>
+              <Box mt={2} display="flex" justifyContent="space-between">
+                <Button
+                  onClick={deleteRobotSchedule}
+                  variant="outlined"
+                  color="error"
+                >
+                  {t('schedule_settings.buttons.delete_schedule')}
+                </Button>
+              </Box>
+            </>
+          ) : (
+            <>
+              <Box sx={{ display: 'flex', alignItems: 'center', width: '100%' }}>
+                <Typography sx={{ marginRight: '10px' }}>{t('schedule_settings.labels.run_once_every')}</Typography>
+                <TextField
+                  type="number"
+                  value={settings.runEvery}
+                  onChange={(e) => handleChange('runEvery', parseInt(e.target.value))}
+                  sx={textStyle}
+                  inputProps={{ min: 1 }}
+                />
+                <Dropdown
+                  label=""
+                  id="runEveryUnit"
+                  value={settings.runEveryUnit}
+                  handleSelect={(e) => handleChange('runEveryUnit', e.target.value)}
+                  sx={dropDownStyle}
+                >
+                  {units.map((unit) => (
+                    <MenuItem key={unit} value={unit}> {unit.charAt(0).toUpperCase() + unit.slice(1).toLowerCase()}</MenuItem>
+                  ))}
+                </Dropdown>
+              </Box>
+
+              <Box sx={{ display: 'flex', alignItems: 'center', width: '100%' }}>
+                <Typography sx={{ marginBottom: '5px', marginRight: '25px' }}>
+                  {['MONTHS', 'WEEKS'].includes(settings.runEveryUnit) ? t('schedule_settings.labels.start_from_label') : t('schedule_settings.labels.start_from_label')}
+                </Typography>
+                <Dropdown
+                  label=""
+                  id="startFrom"
+                  value={settings.startFrom}
+                  handleSelect={(e) => handleChange('startFrom', e.target.value)}
+                  sx={dropDownStyle}
+                >
+                  {days.map((day) => (
+                    <MenuItem key={day} value={day}>
+                      {day.charAt(0).toUpperCase() + day.slice(1).toLowerCase()}
+                    </MenuItem>
+                  ))}
+                </Dropdown>
+              </Box>
+
+              {settings.runEveryUnit === 'MONTHS' && (
+                <Box sx={{ display: 'flex', alignItems: 'center', width: '100%' }}>
+                  <Typography sx={{ marginBottom: '5px', marginRight: '25px' }}>{t('schedule_settings.labels.on_day_of_month')}</Typography>
+                  <TextField
+                    type="number"
+                    value={settings.dayOfMonth}
+                    onChange={(e) => handleChange('dayOfMonth', e.target.value)}
+                    sx={textStyle}
+                    inputProps={{ min: 1, max: 31 }}
+                  />
+                </Box>
+              )}
+
+              {['MINUTES', 'HOURS'].includes(settings.runEveryUnit) ? (
+                <Box sx={{ display: 'flex', alignItems: 'center', width: '100%' }}>
+                  <Box sx={{ marginRight: '20px' }}>
+                    <Typography sx={{ marginBottom: '5px' }}>{t('schedule_settings.labels.in_between')}</Typography>
+                    <TextField
+                      type="time"
+                      value={settings.atTimeStart}
+                      onChange={(e) => handleChange('atTimeStart', e.target.value)}
+                      sx={textStyle}
+                    />
+                    <TextField
+                      type="time"
+                      value={settings.atTimeEnd}
+                      onChange={(e) => handleChange('atTimeEnd', e.target.value)}
+                      sx={textStyle}
+                    />
+                  </Box>
+                </Box>
+              ) : (
+                <Box sx={{ display: 'flex', alignItems: 'center', width: '100%' }}>
+                  <Typography sx={{ marginBottom: '5px', marginRight: '10px' }}>{t('schedule_settings.at_around')}</Typography>
+                  <TextField
+                    type="time"
+                    value={settings.atTimeStart}
+                    onChange={(e) => handleChange('atTimeStart', e.target.value)}
+                    sx={textStyle}
+                  />
+                </Box>
+              )}
+
+              <Box sx={{ display: 'flex', alignItems: 'center', width: '100%' }}>
+                <Typography sx={{ marginRight: '10px' }}>{t('schedule_settings.timezone')}</Typography>
+                <Dropdown
+                  label=""
+                  id="timezone"
+                  value={settings.timezone}
+                  handleSelect={(e) => handleChange('timezone', e.target.value)}
+                  sx={dropDownStyle}
+                >
+                  {validMomentTimezones.map((tz) => (
+                    <MenuItem key={tz} value={tz}>{tz.charAt(0).toUpperCase() + tz.slice(1).toLowerCase()}</MenuItem>
+                  ))}
+                </Dropdown>
+              </Box>
+              <Box mt={2} display="flex" justifyContent="flex-end">
+                <Button onClick={async () => {
+                  const success = await handleStart(settings);
+                  if (success) {
+                    await getRobotSchedule();
+                  }
+                }} variant="contained" color="primary">
+                  {t('schedule_settings.buttons.save_schedule')}
+                </Button>
+                <Button
+                  onClick={handleClose}
+                  color="primary"
+                  variant="outlined"
+                  style={{ marginLeft: '10px' }}
+                  sx={{
+                    color: '#ff00c3 !important',
+                    borderColor: '#ff00c3 !important',
+                    backgroundColor: 'whitesmoke !important',
+                  }}>
+                  {t('schedule_settings.buttons.cancel')}
+                </Button>
+              </Box>
+            </>
+          )}
+        </>
+      </Box>
+    </GenericModal>
+  );
+};
+
+const modalStyle = {
+  top: '50%',
+  left: '50%',
+  transform: 'translate(-50%, -50%)',
+  width: '40%',
+  backgroundColor: 'background.paper',
+  p: 4,
+  height: 'fit-content',
+  display: 'block',
+  padding: '20px',
+};
\ No newline at end of file