"use client";
import { useState } from "react";
import { Bell, Calendar as CalendarIcon, Loader2 } from "lucide-react";
import { Button } from "@/components/ui/button";
import {
Dialog,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
DialogTrigger,
} from "@/components/ui/dialog";
import {
Popover,
PopoverContent,
PopoverTrigger,
} from "@/components/ui/popover";
import { Calendar } from "@/components/ui/calendar";
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/components/ui/select";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Switch } from "@/components/ui/switch";
import { cn } from "@/lib/utils";
const timeOptions = [
"09:00", "09:30", "10:00", "10:30", "11:00", "11:30",
"12:00", "12:30", "13:00", "13:30", "14:00", "14:30",
"15:00", "15:30", "16:00", "16:30", "17:00", "17:30",
"18:00", "19:00", "20:00", "21:00",
];
const formatTime = (time: string) => {
return new Date(`2000-01-01T${time}`).toLocaleTimeString("en-US", {
hour: "numeric",
minute: "2-digit",
hour12: true,
});
};
export const title = "React Dialog Block Set Reminder";
export default function DialogSetReminder() {
const [open, setOpen] = useState(false);
const [reminderTitle, setReminderTitle] = useState("");
const [date, setDate] = useState<Date | undefined>();
const [time, setTime] = useState("09:00");
const [recurrence, setRecurrence] = useState("none");
const [calendarOpen, setCalendarOpen] = useState(false);
const [notifyPush, setNotifyPush] = useState(true);
const [notifyEmail, setNotifyEmail] = useState(false);
const [isSaving, setIsSaving] = useState(false);
const handleSave = async () => {
if (!reminderTitle.trim() || !date) return;
setIsSaving(true);
await new Promise((resolve) => setTimeout(resolve, 1000));
setIsSaving(false);
setOpen(false);
};
return (
<Dialog open={open} onOpenChange={setOpen}>
<div className="flex min-h-[350px] items-center justify-center">
<DialogTrigger asChild>
<Button variant="outline">
<Bell className="mr-2 h-4 w-4" />
Set Reminder
</Button>
</DialogTrigger>
</div>
<DialogContent className="sm:max-w-sm">
<DialogHeader>
<DialogTitle>Set Reminder</DialogTitle>
<DialogDescription>
Schedule a reminder with notifications.
</DialogDescription>
</DialogHeader>
<div className="space-y-4 py-4">
<div className="space-y-2">
<Label htmlFor="reminder-title">Title</Label>
<Input
id="reminder-title"
placeholder="Remind me to..."
value={reminderTitle}
onChange={(e) => setReminderTitle(e.target.value)}
/>
</div>
<div className="grid grid-cols-2 gap-3">
<div className="space-y-2">
<Label>Date</Label>
<Popover open={calendarOpen} onOpenChange={setCalendarOpen}>
<PopoverTrigger asChild>
<Button
variant="outline"
className={cn(
"w-full justify-start text-left font-normal",
!date && "text-muted-foreground"
)}
>
<CalendarIcon className="mr-2 h-4 w-4" />
{date ? date.toLocaleDateString("en-US", { month: "short", day: "numeric" }) : "Pick date"}
</Button>
</PopoverTrigger>
<PopoverContent className="w-auto p-0" align="start">
<Calendar
mode="single"
selected={date}
onSelect={(d) => {
setDate(d);
setCalendarOpen(false);
}}
disabled={(d) => d < new Date(new Date().setHours(0, 0, 0, 0))}
initialFocus
/>
</PopoverContent>
</Popover>
</div>
<div className="space-y-2">
<Label>Time</Label>
<Select value={time} onValueChange={setTime}>
<SelectTrigger>
<SelectValue>{formatTime(time)}</SelectValue>
</SelectTrigger>
<SelectContent className="max-h-[200px]">
{timeOptions.map((t) => (
<SelectItem key={t} value={t}>
{formatTime(t)}
</SelectItem>
))}
</SelectContent>
</Select>
</div>
</div>
<div className="space-y-2">
<Label>Repeat</Label>
<Select value={recurrence} onValueChange={setRecurrence}>
<SelectTrigger>
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem value="none">Does not repeat</SelectItem>
<SelectItem value="daily">Daily</SelectItem>
<SelectItem value="weekly">Weekly</SelectItem>
<SelectItem value="monthly">Monthly</SelectItem>
</SelectContent>
</Select>
</div>
<div className="space-y-3">
<Label>Notifications</Label>
<div className="flex items-center justify-between">
<span className="text-sm">Push notification</span>
<Switch checked={notifyPush} onCheckedChange={setNotifyPush} />
</div>
<div className="flex items-center justify-between">
<span className="text-sm">Email</span>
<Switch checked={notifyEmail} onCheckedChange={setNotifyEmail} />
</div>
</div>
</div>
<DialogFooter>
<Button variant="outline" onClick={() => setOpen(false)}>
Cancel
</Button>
<Button
onClick={handleSave}
disabled={!reminderTitle.trim() || !date || isSaving}
>
{isSaving ? (
<>
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
Saving...
</>
) : (
"Set Reminder"
)}
</Button>
</DialogFooter>
</DialogContent>
</Dialog>
);
}