@mbpockets/shared-ui 0.1.18

package/dist/EventPage/index.mjs

@@ -0,0 +1,1215 @@
+"use client";
+import { createContext, useState, useEffect, useContext } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { Box, Grid, TextField, Tooltip, IconButton, Button, CircularProgress, Dialog, DialogTitle, DialogContent, DialogActions, Card, CardContent, Typography, FormControl, InputLabel, Select, MenuItem, Chip, LinearProgress } from '@mui/material';
+import DeleteIcon from '@mui/icons-material/Delete';
+import EditIcon from '@mui/icons-material/Edit';
+import AddIcon from '@mui/icons-material/Add';
+import ColorizeIcon from '@mui/icons-material/Colorize';
+import CancelIcon from '@mui/icons-material/Cancel';
+import CheckCircleIcon from '@mui/icons-material/CheckCircle';
+import Box2 from '@mui/material/Box';
+import Grid5 from '@mui/material/Grid';
+import Card4 from '@mui/material/Card';
+import CardContent4 from '@mui/material/CardContent';
+import CardHeader from '@mui/material/CardHeader';
+import Divider from '@mui/material/Divider';
+import Avatar from '@mui/material/Avatar';
+import CasinoIcon from '@mui/icons-material/Casino';
+import CalendarTodayIcon from '@mui/icons-material/CalendarToday';
+import LocationOnIcon from '@mui/icons-material/LocationOn';
+import EventIcon from '@mui/icons-material/Event';
+
+// src/components/EventPage/editMode/EventBannerEdit.tsx
+var defaultValue = {
+  isOwner: false,
+  updateEvent: async () => false,
+  updateImages: () => {
+  },
+  event: null
+};
+var EventEditContext = createContext(defaultValue);
+function EventEditProvider({
+  value,
+  initialEvent,
+  children
+}) {
+  const [event, setEvent] = useState(initialEvent);
+  useEffect(() => {
+    setEvent(initialEvent);
+  }, [initialEvent]);
+  const handleUpdateEvent = async (patch) => {
+    if (value == null ? void 0 : value.updateEvent) {
+      const result = value.updateEvent(patch);
+      if (result instanceof Promise) {
+        const success = await result;
+        if (success) {
+          setEvent((prev) => ({ ...prev, ...patch }));
+        }
+        return success;
+      } else {
+        const success = result === false ? false : true;
+        if (success) {
+          setEvent((prev) => ({ ...prev, ...patch }));
+        }
+        return success;
+      }
+    }
+    return false;
+  };
+  const mergedValue = {
+    ...defaultValue,
+    ...value,
+    event,
+    updateEvent: handleUpdateEvent
+  };
+  return /* @__PURE__ */ jsx(EventEditContext.Provider, { value: mergedValue, children });
+}
+function useEventEdit() {
+  const context = useContext(EventEditContext);
+  if (!context) {
+    throw new Error("useEventEdit must be used within an EventEditProvider");
+  }
+  return context;
+}
+function generateTagsDisplay(tag) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: "inline-block text-sm px-3 py-1 rounded-full outline-black outline-2 font-outlined",
+      style: {
+        marginTop: "6px",
+        marginRight: "6px",
+        marginBottom: "6px",
+        background: tag.color || "#bfbcbb",
+        color: "white",
+        textShadow: "black 0.2em 0.2em 0.4em"
+      },
+      children: tag.label
+    },
+    tag.id
+  );
+}
+function EventBannerEdit({
+  initialValue,
+  onCancel,
+  onSave
+}) {
+  const { updateImages } = useEventEdit();
+  const [title, setTitle] = useState(initialValue.title);
+  const [bannerColor, setBannerColor] = useState(initialValue.bannerColor || "");
+  const [desktopBanner, setDesktopBanner] = useState(initialValue.bannerUrl.desktop);
+  const [mobileBanner, setMobileBanner] = useState(initialValue.bannerUrl.mobile || "");
+  const [links, setLinks] = useState(initialValue.links);
+  const [linkToEdit, setLinkToEdit] = useState(null);
+  const [isSaving, setIsSaving] = useState(false);
+  const backgroundColor = bannerColor || "linear-gradient(135deg, rgba(25,118,210,0.8), rgba(25,118,210,1))";
+  const handleSave = async () => {
+    setIsSaving(true);
+    try {
+      const patch = {};
+      if (title !== initialValue.title) {
+        patch.title = title;
+      }
+      const currentBannerColor = bannerColor || void 0;
+      const initialBannerColor = initialValue.bannerColor || void 0;
+      if (currentBannerColor !== initialBannerColor) {
+        patch.bannerColor = currentBannerColor;
+      }
+      const currentMobile = mobileBanner || void 0;
+      const initialMobile = initialValue.bannerUrl.mobile || void 0;
+      if (desktopBanner !== initialValue.bannerUrl.desktop || currentMobile !== initialMobile) {
+        patch.bannerUrl = {
+          desktop: desktopBanner,
+          mobile: currentMobile
+        };
+      }
+      if (JSON.stringify(links) !== JSON.stringify(initialValue.links)) {
+        patch.links = links;
+      }
+      if (Object.keys(patch).length > 0) {
+        await onSave(patch);
+      } else {
+        onCancel();
+      }
+    } catch (error) {
+      console.error("Failed to save banner changes", error);
+    } finally {
+      setIsSaving(false);
+    }
+  };
+  const removeLink = (index) => {
+    setLinks(links.filter((_, i) => i !== index));
+  };
+  const openEditLink = (index) => {
+    setLinkToEdit({
+      index,
+      text: links[index].text,
+      url: links[index].url
+    });
+  };
+  const saveEditedLink = () => {
+    if (linkToEdit) {
+      const newLinks = [...links];
+      if (linkToEdit.index === -1) {
+        newLinks.push({ text: linkToEdit.text, url: linkToEdit.url });
+      } else {
+        newLinks[linkToEdit.index] = { text: linkToEdit.text, url: linkToEdit.url };
+      }
+      setLinks(newLinks);
+      setLinkToEdit(null);
+    }
+  };
+  const handleEyeDropper = async () => {
+    if (!window.EyeDropper) {
+      alert("EyeDropper API is not supported in this browser");
+      return;
+    }
+    const eyeDropper = new window.EyeDropper();
+    try {
+      const result = await eyeDropper.open();
+      setBannerColor(result.sRGBHex);
+    } catch (e) {
+      console.log("EyeDropper cancelled or failed", e);
+    }
+  };
+  return /* @__PURE__ */ jsxs(Box, { sx: { position: "relative", width: "100%" }, children: [
+    /* @__PURE__ */ jsxs(
+      Grid,
+      {
+        sx: {
+          background: backgroundColor,
+          paddingTop: "8px",
+          position: "relative",
+          border: "2px dashed rgba(255,255,255,0.5)",
+          borderRadius: 1
+        },
+        children: [
+          /* @__PURE__ */ jsxs(Box, { sx: {
+            position: "absolute",
+            top: 8,
+            left: 8,
+            zIndex: 10,
+            display: "flex",
+            flexDirection: "column",
+            gap: 1,
+            bgcolor: "rgba(0,0,0,0.5)",
+            p: 1,
+            borderRadius: 1,
+            width: "300px"
+          }, children: [
+            /* @__PURE__ */ jsx(
+              TextField,
+              {
+                label: "Title",
+                variant: "outlined",
+                size: "small",
+                value: title,
+                onChange: (e) => setTitle(e.target.value),
+                sx: { input: { color: "white" }, label: { color: "rgba(255,255,255,0.7)" }, "& .MuiOutlinedInput-root": { "& fieldset": { borderColor: "rgba(255,255,255,0.3)" } } }
+              }
+            ),
+            /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+              /* @__PURE__ */ jsx(
+                TextField,
+                {
+                  label: "Banner Color",
+                  variant: "outlined",
+                  size: "small",
+                  value: bannerColor,
+                  onChange: (e) => setBannerColor(e.target.value),
+                  placeholder: "#HEX or linear-gradient(...)",
+                  sx: { flex: 1, input: { color: "white" }, label: { color: "rgba(255,255,255,0.7)" }, "& .MuiOutlinedInput-root": { "& fieldset": { borderColor: "rgba(255,255,255,0.3)" } } }
+                }
+              ),
+              /* @__PURE__ */ jsx(Tooltip, { title: "Eye Dropper", children: /* @__PURE__ */ jsx(
+                IconButton,
+                {
+                  size: "small",
+                  onClick: handleEyeDropper,
+                  sx: { color: "white", bgcolor: "rgba(255,255,255,0.1)", "&:hover": { bgcolor: "rgba(255,255,255,0.2)" } },
+                  children: /* @__PURE__ */ jsx(ColorizeIcon, { fontSize: "small" })
+                }
+              ) }),
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: "color",
+                  value: bannerColor.startsWith("#") ? bannerColor : "#1976d2",
+                  onChange: (e) => setBannerColor(e.target.value),
+                  style: { width: "40px", height: "40px", padding: 0, border: "none", background: "transparent", cursor: "pointer" }
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx(Box, { sx: { display: "flex", gap: 1 }, children: /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "contained",
+                size: "small",
+                fullWidth: true,
+                onClick: updateImages,
+                children: "Update Images"
+              }
+            ) })
+          ] }),
+          /* @__PURE__ */ jsx(
+            Box,
+            {
+              sx: {
+                width: "100%",
+                height: "auto",
+                maxHeight: "250px",
+                overflow: "hidden",
+                display: "flex",
+                justifyContent: "center",
+                opacity: 0.8
+              },
+              children: /* @__PURE__ */ jsx(
+                Box,
+                {
+                  component: "img",
+                  src: desktopBanner,
+                  alt: title,
+                  sx: {
+                    width: "100%",
+                    height: "auto",
+                    objectFit: "contain"
+                  }
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            Grid,
+            {
+              display: "flex",
+              justifyContent: "center",
+              alignItems: "center",
+              paddingTop: "3px",
+              paddingBottom: "3px",
+              sx: { gap: 1.5, flexWrap: "wrap" },
+              children: [
+                /* @__PURE__ */ jsx(Box, { sx: { px: 1.5, py: 0.5, color: "rgba(255,255,255,0.5)", bgcolor: "rgba(0,0,0,0.4)", borderRadius: 2, border: "1px dashed rgba(255,255,255,0.2)" }, children: "Stats Placeholder" }),
+                generateTagsDisplay(initialValue.eventTag),
+                links.map((link, index) => /* @__PURE__ */ jsxs(
+                  Box,
+                  {
+                    sx: {
+                      position: "relative",
+                      display: "flex",
+                      alignItems: "center",
+                      px: 1.5,
+                      py: 0.5,
+                      color: "#fff",
+                      bgcolor: "rgba(0,0,0,0.7)",
+                      borderRadius: 2,
+                      boxShadow: "0 8px 16px rgba(0,0,0,0.25), 0 2px 4px rgba(0,0,0,0.15)",
+                      border: "1px solid rgba(255,255,255,0.25)",
+                      backdropFilter: "blur(6px)",
+                      fontWeight: 700,
+                      letterSpacing: 0.2
+                    },
+                    children: [
+                      link.text,
+                      /* @__PURE__ */ jsxs(Box, { sx: { ml: 1, display: "flex" }, children: [
+                        /* @__PURE__ */ jsx(Tooltip, { title: "Edit Link", children: /* @__PURE__ */ jsx(IconButton, { size: "small", onClick: () => openEditLink(index), sx: { color: "white", p: 0.2 }, children: /* @__PURE__ */ jsx(EditIcon, { fontSize: "inherit" }) }) }),
+                        /* @__PURE__ */ jsx(Tooltip, { title: "Remove Link", children: /* @__PURE__ */ jsx(IconButton, { size: "small", onClick: () => removeLink(index), sx: { color: "error.light", p: 0.2 }, children: /* @__PURE__ */ jsx(DeleteIcon, { fontSize: "inherit" }) }) })
+                      ] })
+                    ]
+                  },
+                  index
+                )),
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    variant: "outlined",
+                    size: "small",
+                    startIcon: /* @__PURE__ */ jsx(AddIcon, {}),
+                    onClick: () => setLinkToEdit({ index: -1, text: "", url: "" }),
+                    sx: {
+                      color: "white",
+                      borderColor: "rgba(255,255,255,0.5)",
+                      borderRadius: 2,
+                      "&:hover": { borderColor: "white", bgcolor: "rgba(255,255,255,0.1)" }
+                    },
+                    children: "Add Link"
+                  }
+                )
+              ]
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", justifyContent: "flex-end", gap: 2, mt: 2 }, children: [
+      /* @__PURE__ */ jsx(Button, { onClick: onCancel, color: "inherit", disabled: isSaving, children: "Cancel" }),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          onClick: handleSave,
+          variant: "contained",
+          color: "primary",
+          disabled: isSaving,
+          startIcon: isSaving ? /* @__PURE__ */ jsx(CircularProgress, { size: 20, color: "inherit" }) : null,
+          children: isSaving ? "Saving..." : "Save Changes"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs(Dialog, { open: linkToEdit !== null, onClose: () => setLinkToEdit(null), children: [
+      /* @__PURE__ */ jsx(DialogTitle, { children: (linkToEdit == null ? void 0 : linkToEdit.index) === -1 ? "Add Link" : "Edit Link" }),
+      /* @__PURE__ */ jsx(DialogContent, { children: /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", flexDirection: "column", gap: 2, pt: 1, width: "400px" }, children: [
+        /* @__PURE__ */ jsx(
+          TextField,
+          {
+            label: "Link Text",
+            fullWidth: true,
+            value: (linkToEdit == null ? void 0 : linkToEdit.text) || "",
+            onChange: (e) => setLinkToEdit((prev) => prev ? { ...prev, text: e.target.value } : null)
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          TextField,
+          {
+            label: "Link URL",
+            fullWidth: true,
+            value: (linkToEdit == null ? void 0 : linkToEdit.url) || "",
+            onChange: (e) => setLinkToEdit((prev) => prev ? { ...prev, url: e.target.value } : null)
+          }
+        )
+      ] }) }),
+      /* @__PURE__ */ jsxs(DialogActions, { children: [
+        /* @__PURE__ */ jsx(Button, { onClick: () => setLinkToEdit(null), children: "Cancel" }),
+        /* @__PURE__ */ jsx(Button, { onClick: saveEditedLink, variant: "contained", children: "Confirm" })
+      ] })
+    ] })
+  ] });
+}
+var CANDIDATE_TIMEZONES = [
+  "America/New_York",
+  "America/Chicago",
+  "America/Denver",
+  "America/Los_Angeles",
+  "America/Anchorage",
+  "America/Adak",
+  "Pacific/Honolulu",
+  "UTC"
+];
+function EventBasicInfo(props) {
+  var _a, _b, _c, _d, _e, _f, _g, _h;
+  const { isOwner, updateEvent, event } = useEventEdit();
+  const [isEditing, setIsEditing] = useState(false);
+  const description = (_b = (_a = props.description) != null ? _a : event == null ? void 0 : event.description) != null ? _b : "";
+  const startingDate = (_c = props.startingDate) != null ? _c : event == null ? void 0 : event.startingDate;
+  const endingDate = (_d = props.endingDate) != null ? _d : event == null ? void 0 : event.endingDate;
+  const timeInfo = (_f = (_e = props.timeInfo) != null ? _e : event == null ? void 0 : event.date) != null ? _f : "";
+  const timezone = (_h = (_g = props.timezone) != null ? _g : event == null ? void 0 : event.timezone) != null ? _h : "UTC";
+  if (isEditing) {
+    return /* @__PURE__ */ jsx(
+      EventBasicInfoEdit,
+      {
+        initialValue: {
+          description,
+          startingDate: typeof startingDate === "string" ? startingDate : startingDate == null ? void 0 : startingDate.toISOString(),
+          endingDate: typeof endingDate === "string" ? endingDate : endingDate == null ? void 0 : endingDate.toISOString(),
+          date: timeInfo,
+          timezone
+        },
+        onCancel: () => setIsEditing(false),
+        onSave: async (payload) => {
+          const success = await updateEvent(payload);
+          if (success) {
+            setIsEditing(false);
+          }
+        }
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    EventBasicInfoView,
+    {
+      ...props,
+      description,
+      startingDate,
+      endingDate,
+      timeInfo,
+      timezone,
+      isOwner,
+      onEdit: () => setIsEditing(true)
+    }
+  );
+}
+function EventBasicInfoView({ description, locationId, startingDate, endingDate, timeInfo, timezone, isOwner, onEdit }) {
+  return /* @__PURE__ */ jsx(Grid5, { sx: { position: "relative" }, children: /* @__PURE__ */ jsx(Card, { style: {
+    boxShadow: "0px 4px 10px rgba(0, 0, 0, 0.1)",
+    background: "linear-gradient(135deg, rgba(225, 225, 225, 1), rgba(250, 250, 250, 1))"
+  }, children: /* @__PURE__ */ jsxs(CardContent, { children: [
+    isOwner && /* @__PURE__ */ jsx(Box2, { sx: { display: "flex", justifyContent: "flex-end" }, children: /* @__PURE__ */ jsx(Button, { size: "small", onClick: onEdit, variant: "outlined", children: "Edit" }) }),
+    generateTimeInfo(timeInfo, timezone || "UTC", startingDate, endingDate),
+    /* @__PURE__ */ jsx(Typography, { variant: "h5", paddingTop: 2, children: "About:" }),
+    /* @__PURE__ */ jsx(Typography, { sx: { whiteSpace: "pre-wrap" }, paddingTop: 1, children: description }),
+    getLocation()
+  ] }) }) });
+}
+var generateTimeInfo = function(timeInfo, timezone, startingDate, endingDate) {
+  const formatDateTime = (dateInput) => {
+    const d = typeof dateInput === "string" ? new Date(dateInput) : dateInput;
+    if (!d || isNaN(d.getTime())) return "";
+    try {
+      return new Intl.DateTimeFormat("en-US", {
+        month: "short",
+        day: "numeric",
+        year: "numeric",
+        hour: "numeric",
+        minute: "2-digit",
+        hour12: true,
+        timeZone: timezone,
+        timeZoneName: "shortGeneric"
+      }).format(d).replace(",", " @");
+    } catch (e) {
+      return d.toUTCString();
+    }
+  };
+  let rangeText = null;
+  if (startingDate && endingDate) {
+    rangeText = `From ${formatDateTime(startingDate)}
+Until ${formatDateTime(endingDate)}`;
+  } else if (startingDate) {
+    rangeText = `starting ${formatDateTime(startingDate)}`;
+  } else if (endingDate) {
+    rangeText = `until ${formatDateTime(endingDate)}`;
+  }
+  return /* @__PURE__ */ jsxs(Box2, { sx: { mt: 2 }, children: [
+    rangeText && /* @__PURE__ */ jsx(Typography, { variant: "body1", fontSize: "x-large", fontWeight: "bold", sx: { whiteSpace: "pre-wrap" }, children: rangeText }),
+    timeInfo && /* @__PURE__ */ jsxs(Box2, { sx: { mt: 1 }, children: [
+      /* @__PURE__ */ jsx(Typography, { variant: "h5", children: "Hours of Operation:" }),
+      /* @__PURE__ */ jsx(Typography, { variant: "body1", sx: { whiteSpace: "pre-wrap" }, children: timeInfo })
+    ] })
+  ] });
+};
+var getLocation = function(locationId) {
+  return /* @__PURE__ */ jsx(Box2, { sx: {
+    width: "100%",
+    p: 1.5,
+    borderRadius: 2,
+    boxShadow: "0px 4px 10px rgba(0, 0, 0, 0.1)",
+    background: "linear-gradient(135deg, rgba(180, 180,180, 1), rgba(225, 225, 225, 0.8))",
+    mt: 2
+  }, children: "Location Data goes here" });
+};
+function EventBasicInfoEdit({
+  initialValue,
+  onCancel,
+  onSave
+}) {
+  const toWallTimeISO = (dateInput, timeZone) => {
+    if (!dateInput) return "";
+    const d = new Date(dateInput);
+    if (isNaN(d.getTime())) return "";
+    const parts = new Intl.DateTimeFormat("en-US", {
+      year: "numeric",
+      month: "2-digit",
+      day: "2-digit",
+      hour: "2-digit",
+      minute: "2-digit",
+      hour12: false,
+      timeZone
+    }).formatToParts(d);
+    const f = (type) => {
+      var _a;
+      return (_a = parts.find((p) => p.type === type)) == null ? void 0 : _a.value;
+    };
+    const year = f("year");
+    const month = f("month");
+    const day = f("day");
+    let hour = f("hour");
+    if (hour === "24") hour = "00";
+    const minute = f("minute");
+    return `${year}-${month}-${day}T${hour}:${minute}`;
+  };
+  const toUTCISOString = (wallTime, timeZone) => {
+    var _a;
+    if (!wallTime) return void 0;
+    const d = /* @__PURE__ */ new Date(wallTime + ":00Z");
+    const parts = new Intl.DateTimeFormat("en-US", {
+      timeZone,
+      timeZoneName: "longOffset"
+    }).formatToParts(d);
+    const offsetPart = ((_a = parts.find((p) => p.type === "timeZoneName")) == null ? void 0 : _a.value) || "GMT";
+    const offset = offsetPart.replace("GMT", "");
+    const isoWithOffset = `${wallTime}:00${offset || "+00:00"}`;
+    return new Date(isoWithOffset).toISOString();
+  };
+  const [description, setDescription] = useState(initialValue.description);
+  const [timezone, setTimezone] = useState(initialValue.timezone);
+  const [startingDate, setStartingDate] = useState(toWallTimeISO(initialValue.startingDate, initialValue.timezone));
+  const [endingDate, setEndingDate] = useState(toWallTimeISO(initialValue.endingDate, initialValue.timezone));
+  const [timeInfo, setTimeInfo] = useState(initialValue.date);
+  const [isSaving, setIsSaving] = useState(false);
+  const handleSave = async () => {
+    setIsSaving(true);
+    try {
+      const patch = {};
+      if (description !== initialValue.description) patch.description = description;
+      if (timeInfo !== initialValue.date) patch.date = timeInfo;
+      if (timezone !== initialValue.timezone) patch.timezone = timezone;
+      if (startingDate !== toWallTimeISO(initialValue.startingDate, timezone) || timezone !== initialValue.timezone) {
+        patch.startingDate = toUTCISOString(startingDate, timezone);
+      }
+      if (endingDate !== toWallTimeISO(initialValue.endingDate, timezone) || timezone !== initialValue.timezone) {
+        patch.endingDate = toUTCISOString(endingDate, timezone);
+      }
+      if (Object.keys(patch).length > 0) {
+        await onSave(patch);
+      } else {
+        onCancel();
+      }
+    } catch (error) {
+      console.error("Failed to save basic info changes", error);
+    } finally {
+      setIsSaving(false);
+    }
+  };
+  return /* @__PURE__ */ jsx(Card, { sx: {
+    boxShadow: "0px 4px 10px rgba(0, 0, 0, 0.1)",
+    background: "linear-gradient(135deg, rgba(225, 225, 225, 1), rgba(250, 250, 250, 1))",
+    border: "2px dashed rgba(25,118,210,0.5)",
+    width: "100%"
+  }, children: /* @__PURE__ */ jsxs(CardContent, { sx: { position: "relative" }, children: [
+    /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", justifyContent: "flex-end", mb: 1, gap: 1 }, children: [
+      /* @__PURE__ */ jsx(Tooltip, { title: "Cancel", children: /* @__PURE__ */ jsx(IconButton, { size: "small", onClick: onCancel, color: "error", disabled: isSaving, children: /* @__PURE__ */ jsx(CancelIcon, {}) }) }),
+      /* @__PURE__ */ jsx(Tooltip, { title: "Apply Changes", children: /* @__PURE__ */ jsx(IconButton, { size: "small", onClick: handleSave, color: "primary", disabled: isSaving, children: isSaving ? /* @__PURE__ */ jsx(CircularProgress, { size: 24 }) : /* @__PURE__ */ jsx(CheckCircleIcon, {}) }) })
+    ] }),
+    /* @__PURE__ */ jsxs(Box, { sx: { mt: 2 }, children: [
+      /* @__PURE__ */ jsx(Typography, { variant: "body1", fontSize: "x-large", fontWeight: "bold", sx: { mb: 1 }, children: "Event Dates & Times:" }),
+      /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 2, children: [
+        /* @__PURE__ */ jsx(Grid, { size: { xs: 12, sm: 4 }, children: /* @__PURE__ */ jsx(
+          TextField,
+          {
+            fullWidth: true,
+            label: "Starting Date",
+            type: "datetime-local",
+            size: "small",
+            value: startingDate,
+            onChange: (e) => setStartingDate(e.target.value),
+            InputLabelProps: { shrink: true }
+          }
+        ) }),
+        /* @__PURE__ */ jsx(Grid, { size: { xs: 12, sm: 4 }, children: /* @__PURE__ */ jsx(
+          TextField,
+          {
+            fullWidth: true,
+            label: "Ending Date",
+            type: "datetime-local",
+            size: "small",
+            value: endingDate,
+            onChange: (e) => setEndingDate(e.target.value),
+            InputLabelProps: { shrink: true }
+          }
+        ) }),
+        /* @__PURE__ */ jsx(Grid, { size: { xs: 12, sm: 4 }, children: /* @__PURE__ */ jsxs(FormControl, { fullWidth: true, size: "small", children: [
+          /* @__PURE__ */ jsx(InputLabel, { children: "Display Timezone" }),
+          /* @__PURE__ */ jsx(
+            Select,
+            {
+              label: "Display Timezone",
+              value: timezone,
+              onChange: (e) => setTimezone(e.target.value),
+              children: CANDIDATE_TIMEZONES.map((tz) => /* @__PURE__ */ jsx(MenuItem, { value: tz, children: tz }, tz))
+            }
+          )
+        ] }) })
+      ] }),
+      /* @__PURE__ */ jsxs(Box, { sx: { mt: 2 }, children: [
+        /* @__PURE__ */ jsx(Typography, { variant: "h5", children: "Hours of Operation:" }),
+        /* @__PURE__ */ jsx(
+          TextField,
+          {
+            fullWidth: true,
+            multiline: true,
+            variant: "standard",
+            placeholder: "e.g. Mon-Fri 9am-5pm",
+            value: timeInfo,
+            onChange: (e) => setTimeInfo(e.target.value),
+            sx: { mt: 1 }
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(Typography, { variant: "h5", paddingTop: 2, children: "About:" }),
+    /* @__PURE__ */ jsx(
+      TextField,
+      {
+        fullWidth: true,
+        multiline: true,
+        variant: "standard",
+        value: description,
+        onChange: (e) => setDescription(e.target.value),
+        sx: {
+          paddingTop: 1,
+          "& .MuiInputBase-root": {
+            lineHeight: 1.5,
+            whiteSpace: "pre-wrap"
+          }
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx(Box, { sx: {
+      mt: 2,
+      width: "100%",
+      p: 1.5,
+      borderRadius: 2,
+      boxShadow: "0px 4px 10px rgba(0, 0, 0, 0.1)",
+      background: "linear-gradient(135deg, rgba(180, 180,180, 1), rgba(225, 225, 225, 0.8))",
+      color: "rgba(0,0,0,0.5)",
+      border: "1px dashed rgba(0,0,0,0.2)"
+    }, children: "Location Data (Not Editable)" })
+  ] }) });
+}
+function EventBanner(props) {
+  const { isOwner, updateEvent, event } = useEventEdit();
+  const [isEditing, setIsEditing] = useState(false);
+  if (!event && !props.bannerUrl) return null;
+  const bannerUrl = props.bannerUrl || (event == null ? void 0 : event.bannerUrl);
+  const links = props.links || (event == null ? void 0 : event.links) || [];
+  const title = props.title || (event == null ? void 0 : event.title) || "";
+  const eventTag = props.eventTag || (event == null ? void 0 : event.eventTag);
+  const bannerColor = props.bannerColor || (event == null ? void 0 : event.bannerColor);
+  if (!bannerUrl || !eventTag) return null;
+  if (isEditing) {
+    return /* @__PURE__ */ jsx(
+      EventBannerEdit,
+      {
+        initialValue: {
+          bannerUrl,
+          bannerColor,
+          links,
+          title,
+          eventTag
+        },
+        onCancel: () => setIsEditing(false),
+        onSave: async (payload) => {
+          const success = await updateEvent(payload);
+          if (success) {
+            setIsEditing(false);
+          }
+        }
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    EventBannerView,
+    {
+      ...props,
+      bannerUrl,
+      links,
+      title,
+      eventTag,
+      bannerColor,
+      isOwner,
+      onEdit: () => setIsEditing(true)
+    }
+  );
+}
+function EventBannerView({
+  bannerUrl,
+  links,
+  bannerColor,
+  title,
+  eventTag,
+  attendees,
+  numGames,
+  isOwner,
+  onEdit
+}) {
+  const backgroundColor = bannerColor || "linear-gradient(135deg, rgba(25,118,210,0.8), rgba(25,118,210,1))";
+  return /* @__PURE__ */ jsxs(
+    Grid5,
+    {
+      sx: {
+        background: backgroundColor,
+        paddingTop: "8px",
+        position: "relative"
+      },
+      children: [
+        /* @__PURE__ */ jsxs(Grid5, { children: [
+          /* @__PURE__ */ jsxs(
+            Box,
+            {
+              sx: {
+                width: "100%",
+                height: "auto",
+                maxHeight: "250px",
+                overflow: "hidden",
+                display: "flex",
+                justifyContent: "center"
+              },
+              children: [
+                /* @__PURE__ */ jsx(
+                  Box,
+                  {
+                    component: "img",
+                    src: bannerUrl.desktop,
+                    alt: title,
+                    sx: {
+                      width: "100%",
+                      height: "auto",
+                      objectFit: "contain",
+                      display: { xs: "none", md: "block" }
+                    }
+                  }
+                ),
+                bannerUrl.mobile && /* @__PURE__ */ jsx(
+                  Box,
+                  {
+                    component: "img",
+                    src: bannerUrl.mobile,
+                    alt: title,
+                    sx: {
+                      width: "100%",
+                      height: "auto",
+                      objectFit: "contain",
+                      display: { xs: "block", md: "none" }
+                    }
+                  }
+                ),
+                !bannerUrl.mobile && /* @__PURE__ */ jsx(
+                  Box,
+                  {
+                    component: "img",
+                    src: bannerUrl.desktop,
+                    alt: title,
+                    sx: {
+                      width: "100%",
+                      height: "auto",
+                      objectFit: "contain",
+                      display: { xs: "block", md: "none" }
+                    }
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            Grid5,
+            {
+              display: "flex",
+              justifyContent: "center",
+              alignItems: "center",
+              paddingTop: "3px",
+              paddingBottom: "3px",
+              sx: { gap: 1.5, flexWrap: "wrap" },
+              children: [
+                /* @__PURE__ */ jsx(
+                  Box,
+                  {
+                    sx: {
+                      px: 1.5,
+                      py: 0.5,
+                      color: "#fff",
+                      bgcolor: "rgba(0,0,0,0.7)",
+                      borderRadius: 2,
+                      boxShadow: "0 8px 16px rgba(0,0,0,0.25), 0 2px 4px rgba(0,0,0,0.15)",
+                      border: "1px solid rgba(255,255,255,0.25)",
+                      backdropFilter: "blur(6px)",
+                      fontWeight: 700,
+                      letterSpacing: 0.2,
+                      alignItems: "center",
+                      justifyContent: "center"
+                    },
+                    children: `${attendees} Players`
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Box,
+                  {
+                    sx: {
+                      px: 1.5,
+                      py: 0.5,
+                      color: "#fff",
+                      bgcolor: "rgba(0,0,0,0.7)",
+                      borderRadius: 2,
+                      boxShadow: "0 8px 16px rgba(0,0,0,0.25), 0 2px 4px rgba(0,0,0,0.15)",
+                      border: "1px solid rgba(255,255,255,0.25)",
+                      backdropFilter: "blur(6px)",
+                      fontWeight: 700,
+                      letterSpacing: 0.2,
+                      alignItems: "center",
+                      justifyContent: "center"
+                    },
+                    children: `${numGames} tables`
+                  }
+                ),
+                generateTagsDisplay(eventTag),
+                links.map((link) => generateLink(link))
+              ]
+            }
+          )
+        ] }),
+        isOwner && /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "contained",
+            onClick: onEdit,
+            sx: {
+              position: "absolute",
+              top: 16,
+              right: 16,
+              bgcolor: "rgba(255, 255, 255, 0.9)",
+              color: "primary.main",
+              "&:hover": {
+                bgcolor: "white"
+              }
+            },
+            children: "Edit"
+          }
+        )
+      ]
+    }
+  );
+}
+var generateLink = function(link) {
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      component: "a",
+      href: link.url,
+      target: "_blank",
+      rel: "noopener noreferrer",
+      sx: {
+        px: 1.5,
+        py: 0.5,
+        color: "#fff",
+        bgcolor: "rgba(0,0,0,0.7)",
+        borderRadius: 2,
+        boxShadow: "0 8px 16px rgba(0,0,0,0.25), 0 2px 4px rgba(0,0,0,0.15)",
+        border: "1px solid rgba(255,255,255,0.25)",
+        backdropFilter: "blur(6px)",
+        fontWeight: 700,
+        letterSpacing: 0.2,
+        alignItems: "center",
+        justifyContent: "center",
+        textDecoration: "none",
+        "&:hover": {
+          bgcolor: "rgba(255,255,255,0.1)"
+        }
+      },
+      children: link.text
+    },
+    link.text
+  );
+};
+var BaseSearchResultCard = ({
+  result,
+  onClick,
+  children,
+  icon,
+  tags
+}) => {
+  const handleClick = () => {
+    if (onClick) {
+      onClick(result.id);
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    Card,
+    {
+      elevation: 6,
+      sx: {
+        width: "100%",
+        cursor: onClick ? "pointer" : "default",
+        boxShadow: "0px 8px 24px rgba(0, 0, 0, 0.15)",
+        transition: "box-shadow 0.3s ease-in-out",
+        "&:hover": {
+          boxShadow: "0px 12px 28px rgba(0, 0, 0, 0.2)"
+        },
+        marginBottom: 2
+      },
+      onClick: handleClick,
+      children: /* @__PURE__ */ jsxs(CardContent, { sx: { display: "flex", alignItems: "flex-start" }, children: [
+        icon && /* @__PURE__ */ jsx(Box, { sx: { mr: 2, display: "flex", alignItems: "center", pt: 0.5 }, children: icon }),
+        /* @__PURE__ */ jsxs(Box, { sx: { flex: 1 }, children: [
+          /* @__PURE__ */ jsx(Typography, { variant: "h6", sx: { mb: 1 }, children: result.title }),
+          children,
+          /* @__PURE__ */ jsx(Typography, { variant: "body1", children: result.description }),
+          result.tags && result.tags.length > 0 && /* @__PURE__ */ jsx(Box, { sx: { mt: 1 }, children: /* @__PURE__ */ jsx(Box, { sx: {
+            display: "block",
+            whiteSpace: "nowrap",
+            overflow: "hidden",
+            textOverflow: "clip",
+            pl: 0.5
+            // Add some padding to prevent clipping of the leftmost tag
+          }, children: (() => {
+            const MAX_VISIBLE = 5;
+            const tagObjs = result.tags.map((tagId) => tags.find((t) => t.id === tagId)).filter((t) => Boolean(t));
+            const visible = tagObjs.slice(0, MAX_VISIBLE);
+            const hiddenCount = Math.max(tagObjs.length - visible.length, 0);
+            return /* @__PURE__ */ jsxs(Fragment, { children: [
+              visible.map((tag) => generateTagsDisplay(tag)),
+              hiddenCount > 0 && /* @__PURE__ */ jsxs(
+                "span",
+                {
+                  className: "inline-block text-sm px-3 py-1 rounded-full outline-black outline-2 font-outlined",
+                  style: {
+                    marginTop: "6px",
+                    marginRight: "6px",
+                    marginBottom: "6px",
+                    background: "#9e9e9e",
+                    color: "white",
+                    textShadow: "black 0.2em 0.2em 0.4em"
+                  },
+                  children: [
+                    "+",
+                    hiddenCount,
+                    " more"
+                  ]
+                }
+              )
+            ] });
+          })() }) })
+        ] })
+      ] })
+    }
+  );
+};
+var BaseSearchResultCard_default = BaseSearchResultCard;
+var PlayerResultCard = ({
+  result,
+  onClick,
+  tags
+}) => {
+  const firstLetter = result.title.charAt(0).toUpperCase();
+  const getAvatarColor = (name) => {
+    const colors = [
+      "#F44336",
+      "#E91E63",
+      "#9C27B0",
+      "#673AB7",
+      "#3F51B5",
+      "#2196F3",
+      "#03A9F4",
+      "#00BCD4",
+      "#009688",
+      "#4CAF50",
+      "#8BC34A",
+      "#CDDC39",
+      "#FFEB3B",
+      "#FFC107",
+      "#FF9800",
+      "#FF5722"
+    ];
+    let hash = 0;
+    for (let i = 0; i < name.length; i++) {
+      hash = name.charCodeAt(i) + ((hash << 5) - hash);
+    }
+    return colors[Math.abs(hash) % colors.length];
+  };
+  const avatarColor = getAvatarColor(result.title);
+  const playerIcon = /* @__PURE__ */ jsx(
+    Avatar,
+    {
+      src: result.imageUrl,
+      alt: result.title,
+      sx: {
+        width: 40,
+        height: 40,
+        bgcolor: !result.imageUrl ? avatarColor : void 0
+      },
+      children: !result.imageUrl && firstLetter
+    }
+  );
+  return /* @__PURE__ */ jsx(BaseSearchResultCard_default, { result, onClick, icon: playerIcon, tags });
+};
+var PlayerResultCard_default = PlayerResultCard;
+var TableResultCard = ({ result, tags, onClick }) => {
+  const capacity = result.capacity || 1;
+  const numPlayers = result.numPlayers || 0;
+  const occupancy = numPlayers / capacity * 100;
+  return /* @__PURE__ */ jsx(BaseSearchResultCard, { result, tags, onClick, icon: /* @__PURE__ */ jsx(CasinoIcon, { color: "primary" }), children: /* @__PURE__ */ jsxs(Box, { sx: { mb: 1 }, children: [
+    /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", justifyContent: "space-between", alignItems: "center", mb: 0.5 }, children: [
+      /* @__PURE__ */ jsxs(Typography, { variant: "body2", color: "text.secondary", children: [
+        "Players: ",
+        numPlayers,
+        " / ",
+        capacity
+      ] }),
+      result.dungeonMaster ? /* @__PURE__ */ jsx(Chip, { label: "DM Present", size: "small", color: "success", variant: "outlined" }) : /* @__PURE__ */ jsx(Chip, { label: "No DM", size: "small", color: "warning", variant: "outlined" })
+    ] }),
+    /* @__PURE__ */ jsx(LinearProgress, { variant: "determinate", value: occupancy, sx: { height: 8, borderRadius: 4 } })
+  ] }) });
+};
+var TableResultCard_default = TableResultCard;
+var EventResultCard = ({
+  result,
+  onClick,
+  tags
+}) => {
+  const formatDate = (dateString) => {
+    const options = {
+      weekday: "long",
+      year: "numeric",
+      month: "long",
+      day: "numeric"
+    };
+    try {
+      const date = new Date(dateString);
+      return date.toLocaleDateString("en-US", options);
+    } catch {
+      return dateString;
+    }
+  };
+  const formattedDate = result.date ? formatDate(result.date) : "Date TBD";
+  const location = result.location || "Location TBD";
+  return /* @__PURE__ */ jsx(BaseSearchResultCard_default, { result, onClick, icon: /* @__PURE__ */ jsx(EventIcon, { color: "primary" }), tags, children: /* @__PURE__ */ jsxs(Box, { sx: { mb: 1 }, children: [
+    /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", mb: 0.5 }, children: [
+      /* @__PURE__ */ jsx(CalendarTodayIcon, { sx: { mr: 1, fontSize: "small", color: "text.secondary" } }),
+      /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", children: formattedDate })
+    ] }),
+    /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", mb: 1 }, children: [
+      /* @__PURE__ */ jsx(LocationOnIcon, { sx: { mr: 1, fontSize: "small", color: "text.secondary" } }),
+      /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", children: location })
+    ] })
+  ] }) });
+};
+var EventResultCard_default = EventResultCard;
+var ResultsContainer = ({
+  results,
+  onResultClick,
+  tags
+}) => {
+  if (results.length === 0 || !results.map) {
+    return /* @__PURE__ */ jsx(Box2, { sx: { textAlign: "center", py: 4 }, children: "No results found. Try adjusting your filters." });
+  }
+  const onPlayerClick = (id) => {
+    onResultClick == null ? void 0 : onResultClick(id, "player");
+  };
+  const onTableClick = (id) => {
+    onResultClick == null ? void 0 : onResultClick(id, "table");
+  };
+  const onEventClick = (id) => {
+    onResultClick == null ? void 0 : onResultClick(id, "event");
+  };
+  return /* @__PURE__ */ jsx(Box2, { sx: { display: "flex", flexDirection: "column", gap: 2 }, children: results.map((result) => {
+    switch (result.type) {
+      case "player":
+        return /* @__PURE__ */ jsx(
+          PlayerResultCard_default,
+          {
+            result,
+            onClick: onPlayerClick,
+            tags
+          },
+          result.id
+        );
+      case "table":
+        return /* @__PURE__ */ jsx(
+          TableResultCard_default,
+          {
+            result,
+            onClick: onTableClick,
+            tags
+          },
+          result.id
+        );
+      case "event":
+        return /* @__PURE__ */ jsx(
+          EventResultCard_default,
+          {
+            result,
+            onClick: onEventClick,
+            tags
+          },
+          result.id
+        );
+      default:
+        console.error(`Unknown result type: ${result.type}`);
+        return null;
+    }
+  }) });
+};
+var ResultsContainer_default = ResultsContainer;
+var ScrollableResultsList = ({
+  results,
+  tags,
+  maxHeight = 400,
+  onResultClick,
+  emptyText
+}) => {
+  const hasResults = Array.isArray(results) && results.length > 0;
+  return /* @__PURE__ */ jsx(Box2, { sx: { maxHeight, overflowY: "auto", pr: 1 }, children: hasResults ? /* @__PURE__ */ jsx(ResultsContainer_default, { results, onResultClick, tags }) : /* @__PURE__ */ jsx(Box2, { sx: { textAlign: "center", py: 2 }, children: emptyText || "No results to display." }) });
+};
+var ScrollableResultsList_default = ScrollableResultsList;
+var TablesScrollableList = ({
+  results,
+  tags,
+  maxHeight,
+  onResultClick,
+  sortBy = "availability"
+}) => {
+  const tables = (results || []).filter((r) => (r == null ? void 0 : r.type) === "table");
+  const getAvailableSlots = (r) => {
+    const capacity = typeof r.capacity === "number" ? r.capacity : 0;
+    const playersCount = typeof r.numPlayers === "number" ? r.numPlayers : 0;
+    return Math.max(capacity - playersCount, 0);
+  };
+  const sortedTables = sortBy === "availability" ? [...tables].sort((a, b) => getAvailableSlots(b) - getAvailableSlots(a)) : tables;
+  const handleClick = (id) => onResultClick == null ? void 0 : onResultClick(id);
+  return /* @__PURE__ */ jsx(
+    ScrollableResultsList_default,
+    {
+      results: sortedTables,
+      tags,
+      maxHeight,
+      onResultClick: (id, type) => {
+        if (type === "table") handleClick(id);
+      }
+    }
+  );
+};
+var TablesScrollableList_default = TablesScrollableList;
+var EventTablesCard = ({
+  tables,
+  tags,
+  maxHeight = 450,
+  onTableClick
+}) => {
+  return /* @__PURE__ */ jsxs(Card4, { elevation: 6, sx: { width: "100%", boxShadow: "0px 8px 24px rgba(0, 0, 0, 0.15)" }, children: [
+    /* @__PURE__ */ jsx(CardHeader, { title: "Tables" }),
+    /* @__PURE__ */ jsx(Divider, {}),
+    /* @__PURE__ */ jsx(CardContent4, { children: /* @__PURE__ */ jsx(TablesScrollableList_default, { results: tables, tags, maxHeight, onResultClick: onTableClick, sortBy: "availability" }) })
+  ] });
+};
+var EventTablesCard_default = EventTablesCard;
+function EventPageLayout({
+  mergedEvent,
+  isOwner,
+  updateEvent,
+  updateImages,
+  attendees,
+  numGames,
+  tables,
+  allTags
+}) {
+  return /* @__PURE__ */ jsx(Grid5, { container: true, flexDirection: "column", children: /* @__PURE__ */ jsxs(EventEditProvider, { initialEvent: mergedEvent, value: { isOwner, updateEvent, updateImages }, children: [
+    /* @__PURE__ */ jsx(Grid5, { children: /* @__PURE__ */ jsx(
+      EventBanner,
+      {
+        attendees,
+        numGames
+      }
+    ) }),
+    /* @__PURE__ */ jsxs(Grid5, { container: true, flexDirection: "row", spacing: 3, size: { xs: 12, md: 12 }, children: [
+      /* @__PURE__ */ jsx(Grid5, { size: { xs: 12, md: 4 }, spacing: 3, padding: 3, children: /* @__PURE__ */ jsx(
+        EventBasicInfo,
+        {
+          locationId: mergedEvent.location || "0"
+        }
+      ) }),
+      /* @__PURE__ */ jsx(Grid5, { size: { xs: 12, md: 8 }, spacing: 3, padding: 3, children: /* @__PURE__ */ jsx(EventTablesCard_default, { tables, tags: allTags }) })
+    ] }),
+    /* @__PURE__ */ jsx(Grid5, {})
+  ] }) });
+}
+
+export { CANDIDATE_TIMEZONES, EventBanner, EventBannerEdit, EventBasicInfo, EventBasicInfoEdit, EventEditProvider, EventPageLayout, EventTablesCard_default as EventTablesCard, useEventEdit };
+//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map