import { Calendar } from "@/features/Calendars/CalendarTypes";
import { RepetitionObject } from "@/features/Events/EventsTypes";
import { userAttendee } from "@/features/User/models/attendee";
import iconCamera from "@/static/images/icon-camera.svg";
import {
  addVideoConferenceToDescription,
  generateMeetingLink,
  removeVideoConferenceFromDescription,
} from "@/utils/videoConferenceUtils";
import {
  Box,
  Button,
  Checkbox,
  FormControl,
  FormControlLabel,
  IconButton,
  MenuItem,
  Select,
  SelectChangeEvent,
  TextField,
  ToggleButton,
  ToggleButtonGroup,
  Typography,
} from "@linagora/twake-mui";
import {
  Close as DeleteIcon,
  ContentCopy as CopyIcon,
  LocationOn as LocationIcon,
  Public as PublicIcon,
} from "@mui/icons-material";
import LockOutlineIcon from "@mui/icons-material/LockOutline";
import SquareRoundedIcon from "@mui/icons-material/SquareRounded";
import React from "react";
import { useI18n } from "twake-i18n";
import AttendeeSelector from "../Attendees/AttendeeSearch";
import { CalendarItemList } from "../Calendar/CalendarItemList";
import { SnackbarAlert } from "../Loading/SnackBarAlert";
import { TimezoneAutocomplete } from "../Timezone/TimezoneAutocomplete";
import { AddDescButton } from "./AddDescButton";
import { DateTimeFields } from "./components/DateTimeFields";
import { DateTimeSummary } from "./components/DateTimeSummary";
import { FieldWithLabel } from "./components/FieldWithLabel";
import { SectionPreviewRow } from "./components/SectionPreviewRow";
import RepeatEvent from "./EventRepeat";
import { useAllDayToggle } from "./hooks/useAllDayToggle";
import { combineDateTime, splitDateTime } from "./utils/dateTimeHelpers";
import { validateEventForm } from "./utils/formValidation";

interface EventFormFieldsProps {
  // Form state
  title: string;
  setTitle: (title: string) => void;
  description: string;
  setDescription: (description: string) => void;
  location: string;
  setLocation: (location: string) => void;
  start: string;
  setStart: (start: string) => void;
  end: string;
  setEnd: (end: string) => void;
  allday: boolean;
  setAllDay: (allday: boolean) => void;
  repetition: RepetitionObject;
  setRepetition: (repetition: RepetitionObject) => void;
  typeOfAction?: "solo" | "all";
  attendees: userAttendee[];
  setAttendees: (attendees: userAttendee[]) => void;
  alarm: string;
  setAlarm: (alarm: string) => void;
  busy: string;
  setBusy: (busy: string) => void;
  eventClass: string;
  setEventClass: (eventClass: string) => void;
  timezone: string;
  setTimezone: (timezone: string) => void;
  calendarid: string;
  setCalendarid: (calendarid: string) => void;
  hasVideoConference: boolean;
  setHasVideoConference: (hasVideoConference: boolean) => void;
  meetingLink: string | null;
  setMeetingLink: (meetingLink: string | null) => void;

  // UI state
  showMore: boolean;
  showDescription: boolean;
  setShowDescription: (showDescription: boolean) => void;
  showRepeat: boolean;
  setShowRepeat: (showRepeat: boolean) => void;
  isOpen?: boolean;

  // Data
  userPersonalCalendars: Calendar[];
  timezoneList: {
    zones: string[];
    browserTz: string;
    getTimezoneOffset: (tzName: string, date: Date) => string;
  };

  // Event handlers
  onStartChange?: (newStart: string) => void;
  onEndChange?: (newEnd: string) => void;
  onAllDayChange?: (
    newAllDay: boolean,
    newStart: string,
    newEnd: string
  ) => void;
  onCalendarChange?: (newCalendarId: string) => void;

  // Validation
  onValidationChange?: (isValid: boolean) => void;
  showValidationErrors?: boolean;
  onHasEndDateChangedChange?: (has: boolean) => void;
}

export default function EventFormFields({
  title,
  setTitle,
  description,
  setDescription,
  location,
  setLocation,
  start,
  setStart,
  end,
  setEnd,
  allday,
  setAllDay,
  repetition,
  setRepetition,
  typeOfAction,
  attendees,
  setAttendees,
  alarm,
  setAlarm,
  busy,
  setBusy,
  eventClass,
  setEventClass,
  timezone,
  setTimezone,
  calendarid,
  setCalendarid,
  hasVideoConference,
  setHasVideoConference,
  meetingLink,
  setMeetingLink,
  showMore,
  showDescription,
  setShowDescription,
  showRepeat,
  setShowRepeat,
  isOpen = false,
  userPersonalCalendars,
  timezoneList,
  onStartChange,
  onEndChange,
  onAllDayChange,
  onCalendarChange,
  onValidationChange,
  showValidationErrors = false,
  onHasEndDateChangedChange,
}: EventFormFieldsProps) {
  const { t } = useI18n();

  // Internal state for 4 separate fields
  const [startDate, setStartDate] = React.useState("");
  const [startTime, setStartTime] = React.useState("");
  const [endDate, setEndDate] = React.useState("");
  const [endTime, setEndTime] = React.useState("");

  // Track if user has manually changed end date in extended mode
  const [hasEndDateChanged, setHasEndDateChanged] = React.useState(false);

  // Track if user has clicked on datetime clickable section in normal mode
  // Once clicked, normal mode will always show full fields until modal closes
  const [hasClickedDateTimeSection, setHasClickedDateTimeSection] =
    React.useState(false);

  // Track if user has clicked on location section in normal mode
  const [hasClickedLocationSection, setHasClickedLocationSection] =
    React.useState(false);

  // Track if user has clicked on calendar section in normal mode
  const [hasClickedCalendarSection, setHasClickedCalendarSection] =
    React.useState(false);

  // Reset hasEndDateChanged and hasClickedDateTimeSection when modal closes
  React.useEffect(() => {
    if (!isOpen) {
      setHasEndDateChanged(false);
      setHasClickedDateTimeSection(false);
      setHasClickedLocationSection(false);
      setHasClickedCalendarSection(false);
    }
  }, [isOpen]);

  // Notify parent about end date change visibility state
  React.useEffect(() => {
    onHasEndDateChangedChange?.(hasEndDateChanged);
  }, [hasEndDateChanged, onHasEndDateChangedChange]);

  // Reset hasEndDateChanged when startDate === endDate in normal mode
  React.useEffect(() => {
    if (
      !showMore &&
      hasEndDateChanged &&
      startDate &&
      endDate &&
      startDate === endDate
    ) {
      setHasEndDateChanged(false);
    }
  }, [showMore, hasEndDateChanged, startDate, endDate]);

  // Use all-day toggle hook
  const { handleAllDayToggle } = useAllDayToggle({
    allday,
    start,
    end,
    startDate,
    startTime,
    endDate,
    endTime,
    setStartTime,
    setEndTime,
    setStart,
    setEnd,
    setAllDay,
    onAllDayChange,
  });

  // Ref for title input field to enable auto-focus
  const titleInputRef = React.useRef<HTMLInputElement>(null);
  const locationInputRef = React.useRef<HTMLInputElement>(null);

  // Track previous showMore state to detect changes
  const prevShowMoreRef = React.useRef<boolean | undefined>(undefined);

  // Focus location field when user clicks the location preview row
  React.useEffect(() => {
    if (hasClickedLocationSection && process.env.NODE_ENV !== "test") {
      locationInputRef.current?.focus();
    }
  }, [hasClickedLocationSection]);

  // Auto-focus title field when modal opens (skip in test environment)
  React.useEffect(() => {
    if (isOpen) {
      if (titleInputRef.current && process.env.NODE_ENV !== "test") {
        // Use setTimeout to ensure the dialog is fully rendered
        const timer = setTimeout(() => {
          titleInputRef.current?.focus();
        }, 100);
        return () => clearTimeout(timer);
      }
    }
  }, [isOpen]);

  // Auto-focus title field when toggling between normal and extended mode
  React.useEffect(() => {
    // Skip on initial render (when prevShowMoreRef is undefined)
    if (
      prevShowMoreRef.current !== undefined &&
      isOpen &&
      process.env.NODE_ENV !== "test"
    ) {
      const hasChanged = prevShowMoreRef.current !== showMore;

      if (hasChanged) {
        // Simple setTimeout approach with sufficient delay for layout changes
        const timer = setTimeout(() => {
          if (titleInputRef.current) {
            titleInputRef.current.focus();
          }
        }, 150);

        // Update previous value before returning cleanup
        prevShowMoreRef.current = showMore;
        return () => clearTimeout(timer);
      }
    }

    // Always update previous value
    prevShowMoreRef.current = showMore;
  }, [showMore, isOpen]);

  // Sync start prop to startDate/startTime
  React.useEffect(() => {
    if (start) {
      const { date, time } = splitDateTime(start);
      setStartDate(date);
      setStartTime(time);
    }
  }, [start]);

  // Sync end prop to endDate/endTime
  React.useEffect(() => {
    if (end) {
      const { date, time } = splitDateTime(end);
      setEndDate(date);
      setEndTime(time);
    }
  }, [end]);

  // Change handlers for 4 separate fields
  const handleStartDateChange = React.useCallback(
    (newDate: string, newTime?: string) => {
      setStartDate(newDate);
      const newStart = combineDateTime(newDate, newTime ? newTime : startTime);

      if (onStartChange) {
        onStartChange(newStart);
      } else {
        setStart(newStart);
      }
    },
    [startTime, onStartChange, setStart]
  );

  const handleStartTimeChange = React.useCallback(
    (newTime: string, newDate?: string) => {
      setStartTime(newTime);
      const newStart = combineDateTime(newDate ? newDate : startDate, newTime);
      if (onStartChange) {
        onStartChange(newStart);
      } else {
        setStart(newStart);
      }
    },
    [startDate, onStartChange, setStart]
  );

  const handleEndDateChange = React.useCallback(
    (newDate: string, newTime?: string) => {
      setEndDate(newDate);
      // Track if user changed end date in extended mode
      if (showMore) {
        setHasEndDateChanged(true);
      }
      const newEnd = combineDateTime(newDate, newTime ? newTime : endTime);
      if (onEndChange) {
        onEndChange(newEnd);
      } else {
        setEnd(newEnd);
      }
    },
    [endTime, onEndChange, setEnd, showMore]
  );

  const handleEndTimeChange = React.useCallback(
    (newTime: string, newDate?: string) => {
      setEndTime(newTime);

      const newEnd = combineDateTime(newDate ? newDate : endDate, newTime);
      if (onEndChange) {
        onEndChange(newEnd);
      } else {
        setEnd(newEnd);
      }
    },
    [endDate, onEndChange, setEnd]
  );

  // Validation logic
  const validateForm = React.useCallback(() => {
    return validateEventForm({
      startDate,
      startTime,
      endDate,
      endTime,
      allday,
      showValidationErrors,
      hasEndDateChanged,
      showMore,
    });
  }, [
    startDate,
    startTime,
    endDate,
    endTime,
    allday,
    showValidationErrors,
    hasEndDateChanged,
    showMore,
  ]);

  // Notify parent about validation changes
  React.useEffect(() => {
    const validation = validateForm();
    onValidationChange?.(validation.isValid);
  }, [validateForm, onValidationChange]);

  // Auto-calculate end time from start time (+ 1 hour) if not already set
  React.useEffect(() => {
    if (startTime && !endTime && !allday) {
      const [hours, minutes] = startTime.split(":");
      const endHour = (parseInt(hours) + 1) % 24;
      const calculatedEndTime = `${endHour.toString().padStart(2, "0")}:${minutes}`;
      setEndTime(calculatedEndTime);
      const newEnd = combineDateTime(endDate || startDate, calculatedEndTime);
      if (onEndChange) {
        onEndChange(newEnd);
      } else {
        setEnd(newEnd);
      }
    }
  }, [startTime, endTime, allday, endDate, startDate, onEndChange, setEnd]);

  const validation = validateForm();

  const handleAddVideoConference = () => {
    const newMeetingLink = generateMeetingLink();
    const updatedDescription = addVideoConferenceToDescription(
      description,
      newMeetingLink
    );
    setDescription(updatedDescription);
    setHasVideoConference(true);
    setMeetingLink(newMeetingLink);
    if (showMore) {
      setShowDescription(true);
    }
  };

  const [openToast, setOpenToast] = React.useState(false);

  const handleCopyMeetingLink = async () => {
    if (meetingLink) {
      try {
        await navigator.clipboard.writeText(meetingLink);
        setOpenToast(true);
      } catch (err) {
        console.error("Failed to copy link:", err);
      }
    }
  };

  const handleDeleteVideoConference = () => {
    setDescription(removeVideoConferenceFromDescription(description));
    setHasVideoConference(false);
    setMeetingLink(null);
  };

  const handleCalendarChange = (newCalendarId: string) => {
    setCalendarid(newCalendarId);
    onCalendarChange?.(newCalendarId);
  };

  return (
    <>
      <FieldWithLabel
        label={showMore ? t("event.form.title") : ""}
        isExpanded={showMore}
      >
        <TextField
          fullWidth
          label=""
          inputProps={{ "aria-label": t("event.form.title") }}
          placeholder={t("event.form.titlePlaceholder")}
          value={title}
          onChange={(e) => {
            setTitle(e.target.value);
          }}
          size="small"
          margin="dense"
          inputRef={titleInputRef}
        />
      </FieldWithLabel>

      <FieldWithLabel
        label={
          !showMore && !hasClickedDateTimeSection
            ? ""
            : t("event.form.dateTime")
        }
        isExpanded={showMore}
      >
        {!showMore && !hasClickedDateTimeSection ? (
          <DateTimeSummary
            startDate={startDate}
            startTime={startTime}
            endDate={endDate}
            endTime={endTime}
            allday={allday}
            timezone={timezone}
            repetition={repetition}
            showEndDate={
              allday ||
              (hasEndDateChanged && startDate !== endDate) ||
              (!allday && startDate !== endDate)
            }
            onClick={() => setHasClickedDateTimeSection(true)}
          />
        ) : (
          <DateTimeFields
            startDate={startDate}
            startTime={startTime}
            endDate={endDate}
            endTime={endTime}
            allday={allday}
            showMore={showMore}
            hasEndDateChanged={hasEndDateChanged}
            validation={validation}
            onStartDateChange={handleStartDateChange}
            onStartTimeChange={handleStartTimeChange}
            onEndDateChange={handleEndDateChange}
            onEndTimeChange={handleEndTimeChange}
            showEndDate={
              showMore ||
              allday ||
              (hasEndDateChanged && startDate !== endDate) ||
              (!showMore && !allday && startDate !== endDate)
            }
            onToggleEndDate={() => {}}
          />
        )}
      </FieldWithLabel>

      {!(!showMore && !hasClickedDateTimeSection) && (
        <FieldWithLabel label=" " isExpanded={showMore}>
          <Box display="flex" gap={2} alignItems="center">
            <FormControlLabel
              control={
                <Checkbox checked={allday} onChange={handleAllDayToggle} />
              }
              label={
                <Typography variant="h6">{t("event.form.allDay")}</Typography>
              }
            />
            <FormControlLabel
              control={
                <Checkbox
                  checked={
                    showRepeat ||
                    (typeOfAction === "solo" && !!repetition?.freq)
                  }
                  disabled={typeOfAction === "solo"}
                  onChange={() => {
                    const newShowRepeat = !showRepeat;
                    setShowRepeat(newShowRepeat);
                    if (newShowRepeat) {
                      setRepetition({
                        freq: "daily",
                        interval: 1,
                        occurrences: 0,
                        endDate: "",
                        byday: null,
                      } as RepetitionObject);
                    } else {
                      setRepetition({
                        freq: "",
                        interval: 1,
                        occurrences: 0,
                        endDate: "",
                        byday: null,
                      } as RepetitionObject);
                    }
                  }}
                />
              }
              label={
                <Typography variant="h6">{t("event.form.repeat")}</Typography>
              }
            />
            <TimezoneAutocomplete
              value={timezone}
              onChange={setTimezone}
              zones={timezoneList.zones}
              getTimezoneOffset={(tzName: string) =>
                timezoneList.getTimezoneOffset(tzName, new Date(start))
              }
              showIcon={false}
              width={220}
              size="small"
              placeholder={t("event.form.timezonePlaceholder")}
            />
          </Box>
        </FieldWithLabel>
      )}

      {!(!showMore && !hasClickedDateTimeSection) &&
        (showRepeat || (typeOfAction === "solo" && repetition?.freq)) && (
          <FieldWithLabel label=" " isExpanded={showMore}>
            <RepeatEvent
              repetition={repetition}
              eventStart={new Date(start)}
              setRepetition={setRepetition}
              isOwn={typeOfAction !== "solo"}
            />
          </FieldWithLabel>
        )}

      <FieldWithLabel
        label={showMore ? t("event.form.participants") : ""}
        isExpanded={showMore}
      >
        <AttendeeSelector
          attendees={attendees}
          setAttendees={setAttendees}
          placeholder={t("event.form.addGuestsPlaceholder")}
          inputSlot={(params) => <TextField {...params} size="small" />}
        />
      </FieldWithLabel>

      <FieldWithLabel
        label={showMore ? t("event.form.videoMeeting") : ""}
        isExpanded={showMore}
      >
        {!showMore ? (
          hasVideoConference && meetingLink ? (
            <Box display="flex" gap={1} alignItems="center">
              <Button
                startIcon={
                  <img src={iconCamera} alt="camera" width={24} height={24} />
                }
                onClick={() =>
                  window.open(meetingLink, "_blank", "noopener,noreferrer")
                }
                size="medium"
                variant="contained"
                color="primary"
                sx={{ borderRadius: "4px", mr: 1 }}
              >
                {t("event.form.joinVisioConference")}
              </Button>
              <IconButton
                onClick={handleCopyMeetingLink}
                size="small"
                sx={{ color: "primary.main" }}
                aria-label={t("event.form.copyMeetingLink")}
                title={t("event.form.copyMeetingLink")}
              >
                <CopyIcon />
              </IconButton>
              <IconButton
                onClick={handleDeleteVideoConference}
                size="small"
                sx={{ color: "error.main" }}
                aria-label={t("event.form.removeVideoConference")}
                title={t("event.form.removeVideoConference")}
              >
                <DeleteIcon />
              </IconButton>
            </Box>
          ) : (
            <SectionPreviewRow
              icon={
                <img src={iconCamera} alt="camera" width={24} height={24} />
              }
              onClick={handleAddVideoConference}
            >
              {t("event.form.addVisioConference")}
            </SectionPreviewRow>
          )
        ) : (
          <Box display="flex" gap={1} alignItems="center">
            <Button
              startIcon={
                <img src={iconCamera} alt="camera" width={24} height={24} />
              }
              onClick={handleAddVideoConference}
              size="medium"
              variant="contained"
              color="secondary"
              sx={{
                borderRadius: "4px",
                display: hasVideoConference ? "none" : "flex",
              }}
            >
              {t("event.form.addVisioConference")}
            </Button>

            {hasVideoConference && meetingLink && (
              <>
                <Button
                  startIcon={
                    <img src={iconCamera} alt="camera" width={24} height={24} />
                  }
                  onClick={() =>
                    window.open(meetingLink, "_blank", "noopener,noreferrer")
                  }
                  size="medium"
                  variant="contained"
                  color="primary"
                  sx={{
                    borderRadius: "4px",
                    mr: 1,
                  }}
                >
                  {t("event.form.joinVisioConference")}
                </Button>
                <IconButton
                  onClick={handleCopyMeetingLink}
                  size="small"
                  sx={{ color: "primary.main" }}
                  aria-label={t("event.form.copyMeetingLink")}
                  title={t("event.form.copyMeetingLink")}
                >
                  <CopyIcon />
                </IconButton>
                <IconButton
                  onClick={handleDeleteVideoConference}
                  size="small"
                  sx={{ color: "error.main" }}
                  aria-label={t("event.form.removeVideoConference")}
                  title={t("event.form.removeVideoConference")}
                >
                  <DeleteIcon />
                </IconButton>
              </>
            )}
          </Box>
        )}
      </FieldWithLabel>

      <AddDescButton
        showDescription={showDescription}
        setShowDescription={setShowDescription}
        showMore={showMore}
        description={description}
        setDescription={setDescription}
      />

      <FieldWithLabel
        label={
          showMore || hasClickedLocationSection ? t("event.form.location") : ""
        }
        isExpanded={showMore}
      >
        {!showMore && !hasClickedLocationSection ? (
          <SectionPreviewRow
            icon={<LocationIcon />}
            onClick={() => setHasClickedLocationSection(true)}
          >
            {location || t("event.form.locationPlaceholder")}
          </SectionPreviewRow>
        ) : (
          <TextField
            fullWidth
            label=""
            inputRef={locationInputRef}
            inputProps={{ "aria-label": t("event.form.location") }}
            placeholder={t("event.form.locationPlaceholder")}
            value={location}
            onChange={(e) => setLocation(e.target.value)}
            size="small"
            margin="dense"
          />
        )}
      </FieldWithLabel>

      <FieldWithLabel
        label={
          showMore || hasClickedCalendarSection ? t("event.form.calendar") : ""
        }
        isExpanded={showMore}
      >
        {!showMore && !hasClickedCalendarSection ? (
          <SectionPreviewRow
            icon={
              <SquareRoundedIcon
                sx={{
                  color:
                    userPersonalCalendars.find((cal) => cal.id === calendarid)
                      ?.color?.light ?? "#3788D8",
                  width: 24,
                  height: 24,
                }}
              />
            }
            onClick={() => setHasClickedCalendarSection(true)}
          >
            {userPersonalCalendars.find((cal) => cal.id === calendarid)?.name ||
              t("event.form.calendar")}
          </SectionPreviewRow>
        ) : (
          <FormControl fullWidth margin="dense" size="small">
            <Select
              value={calendarid ?? ""}
              label=""
              SelectDisplayProps={{ "aria-label": t("event.form.calendar") }}
              displayEmpty
              onChange={(e: SelectChangeEvent) =>
                handleCalendarChange(e.target.value)
              }
            >
              {CalendarItemList(userPersonalCalendars)}
            </Select>
          </FormControl>
        )}
      </FieldWithLabel>

      {showMore && (
        <>
          <FieldWithLabel
            label={t("event.form.notification")}
            isExpanded={showMore}
          >
            <FormControl fullWidth margin="dense" size="small">
              <Select
                labelId="notification"
                value={alarm}
                displayEmpty
                onChange={(e: SelectChangeEvent) => setAlarm(e.target.value)}
              >
                <MenuItem value="">{t("event.form.notifications.")}</MenuItem>
                <MenuItem value="-PT1M">
                  {t("event.form.notifications.-PT1M")}
                </MenuItem>
                <MenuItem value="-PT5M">
                  {t("event.form.notifications.-PT5M")}
                </MenuItem>
                <MenuItem value="-PT10M">
                  {t("event.form.notifications.-PT10M")}
                </MenuItem>
                <MenuItem value="-PT15M">
                  {t("event.form.notifications.-PT15M")}
                </MenuItem>
                <MenuItem value="-PT30M">
                  {t("event.form.notifications.-PT30M")}
                </MenuItem>
                <MenuItem value="-PT1H">
                  {t("event.form.notifications.-PT1H")}
                </MenuItem>
                <MenuItem value="-PT2H">
                  {t("event.form.notifications.-PT2H")}
                </MenuItem>
                <MenuItem value="-PT5H">
                  {t("event.form.notifications.-PT5H")}
                </MenuItem>
                <MenuItem value="-PT12H">
                  {t("event.form.notifications.-PT12H")}
                </MenuItem>
                <MenuItem value="-PT1D">
                  {t("event.form.notifications.-PT1D")}
                </MenuItem>
                <MenuItem value="-PT2D">
                  {t("event.form.notifications.-PT2D")}
                </MenuItem>
                <MenuItem value="-PT1W">
                  {t("event.form.notifications.-PT1W")}
                </MenuItem>
              </Select>
            </FormControl>
          </FieldWithLabel>

          <FieldWithLabel
            label={t("event.form.showMeAs")}
            isExpanded={showMore}
          >
            <FormControl fullWidth margin="dense" size="small">
              <Select
                labelId="busy"
                value={busy}
                onChange={(e: SelectChangeEvent) => setBusy(e.target.value)}
              >
                <MenuItem value={"TRANSPARENT"}>
                  {t("event.form.free")}
                </MenuItem>
                <MenuItem value={"OPAQUE"}>{t("event.form.busy")}</MenuItem>
              </Select>
            </FormControl>
          </FieldWithLabel>

          <FieldWithLabel
            label={t("event.form.visibleTo")}
            isExpanded={showMore}
          >
            <ToggleButtonGroup
              value={eventClass}
              exclusive
              onChange={(e, newValue) => {
                if (newValue !== null) {
                  setEventClass(newValue);
                }
              }}
              size="medium"
            >
              <ToggleButton value="PUBLIC" sx={{ minWidth: "160px" }}>
                <PublicIcon sx={{ mr: 1 }} />
                {t("event.form.visibleAll")}
              </ToggleButton>
              <ToggleButton value="PRIVATE" sx={{ minWidth: "160px" }}>
                <LockOutlineIcon sx={{ mr: 1 }} />
                {t("event.form.visibleParticipants")}
              </ToggleButton>
            </ToggleButtonGroup>
          </FieldWithLabel>
        </>
      )}
      <SnackbarAlert
        setOpen={setOpenToast}
        open={openToast}
        message={t("event.form.meetCopied")}
      />
    </>
  );
}