import * as React from 'react';
import { useRouter, useSearchParams } from 'next/navigation';
import { createVolunteerShift } from '@/services/volunteerSlot.service';
import { zodResolver } from '@hookform/resolvers/zod';
import { Close, DeleteOutline, Remove } from '@mui/icons-material';
import { Autocomplete, FormHelperText, IconButton, OutlinedInput, Stack, TextField, useTheme } from '@mui/material';
import Backdrop from '@mui/material/Backdrop';
import Box from '@mui/material/Box';
import Button from '@mui/material/Button';
import Fade from '@mui/material/Fade';
import FormControl from '@mui/material/FormControl';
import InputLabel from '@mui/material/InputLabel';
import ListSubheader from '@mui/material/ListSubheader';
import MenuItem from '@mui/material/MenuItem';
import Modal from '@mui/material/Modal';
import Select, { SelectChangeEvent } from '@mui/material/Select';
import Typography from '@mui/material/Typography';
import { TimePicker } from '@mui/x-date-pickers';
import { DatePicker } from '@mui/x-date-pickers/DatePicker';
import { Minus, MinusCircle, Plus } from '@phosphor-icons/react/dist/ssr';
import { AxiosError } from 'axios';
import dayjs from 'dayjs';
import utc from 'dayjs/plugin/utc';
dayjs.extend(utc);
import { enqueueSnackbar } from 'notistack';
import { Controller, useFieldArray, useForm } from 'react-hook-form';
import { z as zod } from 'zod';

import { ISlot } from '@/types/slot.type';

const style = {
  position: 'absolute' as 'absolute',
  top: '50%',
  left: '50%',
  transform: 'translate(-50%, -50%)',
  width: '100%',
  maxWidth: { lg: '1060px', md: '850px', sm: '500px', xs: '300px' },
  minWidth: { lg: '1060px', md: '850px', sm: '500px', xs: '300px' },
  maxHeight: '90vh',
  minHeight: 'auto',
  bgcolor: 'background.paper',
  border: (theme: any) => theme.palette.mode === 'dark' 
    ? '1px solid rgba(255, 255, 255, 0.12)' 
    : '1px solid rgba(0, 0, 0, 0.12)',
  borderRadius: 4,
  boxShadow: (theme: any) => theme.palette.mode === 'dark' 
    ? '0 24px 48px rgba(0, 0, 0, 0.4), 0 8px 16px rgba(0, 0, 0, 0.2)' 
    : '0 24px 48px rgba(0, 0, 0, 0.15), 0 8px 16px rgba(0, 0, 0, 0.1)',
  background: (theme: any) => theme.palette.mode === 'dark' 
    ? 'linear-gradient(145deg, #1a202c 0%, #2d3748 100%)' 
    : 'linear-gradient(145deg, #ffffff 0%, #f8fafc 100%)',
  p: { lg: 4, md: 4, sm: 2, xs: 2 },
  overflowY: 'scroll',
  backdropFilter: 'blur(20px)',
  '&::-webkit-scrollbar': {
    width: '8px',
  },
  '&::-webkit-scrollbar-track': {
    background: (theme: any) => theme.palette.mode === 'dark' ? '#2d3748' : '#f1f5f9',
    borderRadius: '4px',
  },
  '&::-webkit-scrollbar-thumb': {
    background: (theme: any) => theme.palette.mode === 'dark' ? '#4a5568' : '#cbd5e0',
    borderRadius: '4px',
    '&:hover': {
      background: (theme: any) => theme.palette.mode === 'dark' ? '#718096' : '#a0aec0',
    },
  },
};

interface IAddSlot {
  open: boolean;
  handleClose: () => void;
  slots: ISlot[];
  refetch: () => void
}
type TimeSlot = {
  startTime: string;
  endTime: string;
  location: string;
};

const dummyData = [
  { label: 'The Shawshank Redemption', value: 1994 },
  { label: 'The Godfather', value: 1972 },
  { label: 'The Godfather: Part II', value: 1974 },
  { label: 'The Dark Knight', value: 2008 },
];

// Define the Zod schema for each time slot
const TimeSlotSchema = zod.object({
  startTime: zod.string().min(1, 'Start time is required'),
  endTime: zod.string().min(1, 'End time is required'),
  slot: zod.string().min(1, 'Slot is required'),
  slotChange: zod.string().min(1, 'Slot is required'),

  location: zod.string().optional().or(zod.literal('')),
});

const schema = zod.object({
  // passcode: zod.string().min(1, { message: 'Passcode is required' }),
  // userLimit: zod.number().min(1, { message: 'User limit must be at least 1' }),
  // status: zod.boolean(),
  // start_at: zod.string().refine((date) => date >= currentDateString, {
  //   message: 'Start date cannot be in the past',
  // }),
  date: zod.coerce.date(),
  timeSlots: zod.array(TimeSlotSchema).min(1, 'At least one time slot is required'),
});
//   .superRefine((values, ctx) => {
//     if (values.end_at < values.start_at) {
//       ctx.addIssue({
//         code: 'custom',
//         path: ['end_at'],
//         message: 'End date cannot be before start date',
//       });
//     }
//   });

export type CreateOrganizationValues = zod.infer<typeof schema>;

export default function AddDateSlotModal({ open, handleClose, slots, refetch }: IAddSlot) {
  const router = useRouter();
  const searchParams = useSearchParams();
  const [isLoading, setIsLoading] = React.useState(false);
  const theme = useTheme();

  const {
    control,
    handleSubmit,
    setError,
    reset,
    watch,
    setValue,
    formState: { errors },
  } = useForm<CreateOrganizationValues>({
    resolver: zodResolver(schema),
    defaultValues: {
      date: new Date(),
      timeSlots: [
        {
          endTime: '',
          startTime: '',
          location: '',
          slot: '',
          slotChange: 'only-this-slot',
        },
      ],
    },
  });

  const selectedDate = watch('date');

  // Update time values when date changes (only if times are already set)
  const timeSlots = watch('timeSlots');
  React.useEffect(() => {
    if (selectedDate) {
      timeSlots.forEach((slot, index) => {
        if (slot.startTime) {
          const startTime = dayjs(slot.startTime);
          if (startTime.isValid()) {
            // Only update if the time's date doesn't match the selected date
            const dateFromTime = startTime.format('YYYY-MM-DD');
            const selectedDateStr = dayjs(selectedDate).format('YYYY-MM-DD');
            if (dateFromTime !== selectedDateStr) {
              const date = dayjs(selectedDate).startOf('day');
              const combinedDateTime = date
                .set('hour', startTime.hour())
                .set('minute', startTime.minute())
                .set('second', startTime.second());
              const utcDateTime = combinedDateTime.utc().toISOString();
              setValue(`timeSlots.${index}.startTime`, utcDateTime, { shouldValidate: true });
            }
          }
        }
        if (slot.endTime) {
          const endTime = dayjs(slot.endTime);
          if (endTime.isValid()) {
            // Only update if the time's date doesn't match the selected date
            const dateFromTime = endTime.format('YYYY-MM-DD');
            const selectedDateStr = dayjs(selectedDate).format('YYYY-MM-DD');
            if (dateFromTime !== selectedDateStr) {
              const date = dayjs(selectedDate).startOf('day');
              const combinedDateTime = date
                .set('hour', endTime.hour())
                .set('minute', endTime.minute())
                .set('second', endTime.second());
              const utcDateTime = combinedDateTime.utc().toISOString();
              setValue(`timeSlots.${index}.endTime`, utcDateTime, { shouldValidate: true });
            }
          }
        }
      });
    }
  }, [selectedDate, timeSlots, setValue]);

  const onSubmit = React.useCallback(async (values: CreateOrganizationValues) => {
    console.log(values, 'Vallues');

    const data = values.timeSlots.map((el) => {
      return {
        shiftDate: dayjs(values.date).format('YYYY-MM-DD'),
        shiftStartTime: el.startTime, // Already in ISO format
        shiftEndTime: el.endTime, // Already in ISO format
        slotId: el.slot,
        address: el.location ? el.location : '',
      };
    });
    try {
      setIsLoading(true);
      const response = await createVolunteerShift(data);
      console.log(response, 'Response notification');
      enqueueSnackbar('Volunteer shift added successfully', { variant: 'success' });
      setIsLoading(false);
      reset()
      refetch()
      handleClose();
    } catch (error) {
      console.error('Error in creating volunteer shift:', error);
      enqueueSnackbar('Error in creating volunteer shift', { variant: 'error' });
      setIsLoading(false);
    }
  }, []);

  const { fields, append, remove } = useFieldArray({
    control,
    name: 'timeSlots', // Corresponds to the "timeSlots" in FormData
  });

  const openSlotModal = () => {
    // Convert existing query params to a new object
    const params = new URLSearchParams(searchParams);

    // Add/overwrite the `slot_modal` parameter
    params.set('slot_modal', '1');

    // Push the updated URL without losing current query params
    router.push(`${window.location.pathname}?${params.toString()}`);
  };
  return (
    <div>
      <Modal
        aria-labelledby="transition-modal-title"
        aria-describedby="transition-modal-description"
        open={open}
        onClose={handleClose}
        closeAfterTransition
        slots={{ backdrop: Backdrop }}
        slotProps={{
          backdrop: {
            timeout: 200,
          },
        }}
        style={{ 
          backdropFilter: 'blur(12px)', 
          backgroundColor: theme.palette.mode === 'dark' 
            ? 'rgba(0, 0, 0, 0.7)' 
            : 'rgba(0, 0, 0, 0.5)', 
          outline: 0 
        }}
      >
        <Fade in={open}>
          <Box
            sx={{
              position: 'absolute' as 'absolute',
              top: '50%',
              left: '50%',
              transform: 'translate(-50%, -50%)',
              width: '100%',
              maxWidth: { lg: '1060px', md: '850px', sm: '500px', xs: '300px' },
              minWidth: { lg: '1060px', md: '850px', sm: '500px', xs: '300px' },
              minHeight: 'auto',
              maxHeight: '90vh',
            }}
          >
            <Box sx={style}>
              <IconButton
                onClick={handleClose}
                sx={{
                  position: 'absolute',
                  right: 16,
                  top: 16,
                  backgroundColor: theme.palette.mode === 'dark' 
                    ? 'rgba(255, 255, 255, 0.08)' 
                    : 'rgba(0, 0, 0, 0.04)',
                  color: theme.palette.mode === 'dark' ? '#e2e8f0' : '#64748b',
                  width: 40,
                  height: 40,
                  '&:hover': {
                    backgroundColor: theme.palette.mode === 'dark' 
                      ? 'rgba(239, 68, 68, 0.2)' 
                      : 'rgba(239, 68, 68, 0.1)',
                    color: theme.palette.mode === 'dark' ? '#f87171' : '#dc2626',
                    transform: 'scale(1.05)',
                  },
                  transition: 'all 0.2s ease-in-out',
                  backdropFilter: 'blur(8px)',
                  border: theme.palette.mode === 'dark' 
                    ? '1px solid rgba(255, 255, 255, 0.08)' 
                    : '1px solid rgba(0, 0, 0, 0.08)',
                }}
              >
                <Close />
              </IconButton>
              <Stack direction={'row'} justifyContent={'space-between'} sx={{ mb: 3 }}>
                <Typography 
                  id="transition-modal-title" 
                  variant="h4" 
                  component="h2"
                  sx={{
                    fontWeight: 700,
                    background: theme.palette.mode === 'dark' 
                      ? 'linear-gradient(135deg, #ffd700 0%, #ffed4a 100%)' 
                      : 'linear-gradient(135deg, #1a202c 0%, #2d3748 100%)',
                    WebkitBackgroundClip: 'text',
                    WebkitTextFillColor: 'transparent',
                    backgroundClip: 'text',
                    letterSpacing: '-0.025em',
                  }}
                >
                  📅 Schedule Date Slot
                </Typography>
              </Stack>
              <Box>
                <form onSubmit={handleSubmit(onSubmit)}>
                  <Stack spacing={2} mt={2}>
                    <Stack direction="row" spacing={2} mb={2}>
                      <Stack spacing={1} flex={1}>
                        {/* <Typography variant="subtitle1">End Date</Typography> */}
                        <Controller
                          control={control}
                          name="date"
                          render={({ field }) => (
                            <DatePicker
                              label="Date"
                              value={field.value ? dayjs(field.value) : null}
                              onChange={(newValue) => field.onChange(newValue)}
                              minDate={dayjs()}
                              slotProps={{
                                textField: {
                                  error: Boolean(errors.date),
                                  helperText: errors.date?.message,
                                },
                              }}
                            />
                          )}
                        />
                      </Stack>
                    </Stack>
                    <Stack sx={{ maxHeight: '45vh', overflowY: 'auto' }}>
                      {fields.map((field, index) => (
                        <Stack
                          key={field.id}
                          direction={'row'}
                          sx={{
                            marginLeft: '60px',
                            marginBottom: '1rem',
                          }}
                        >
                          <IconButton
                            onClick={() => remove(index)}
                            sx={{
                              '&:hover': {
                                backgroundColor: 'transparent', // Prevent hover background
                              },
                              '&:disabled': {
                                opacity: '0.5',
                                cursor: 'not-allowed',
                                // Prevent hover background
                              },
                            }}
                            disabled={fields.length === 1}
                          >
                            <DeleteOutline sx={{ 
                              cursor: 'pointer', 
                              color: theme.palette.mode === 'dark' ? '#f87171' : '#dc2626',
                              '&:hover': {
                                color: theme.palette.mode === 'dark' ? '#fca5a5' : '#ef4444',
                              }
                            }} />
                          </IconButton>
                          <Stack
                            spacing={1}
                            sx={{
                              padding: '20px',
                              borderRadius: 3,
                              background: theme.palette.mode === 'dark' 
                                ? 'rgba(255, 255, 255, 0.02)' 
                                : 'rgba(0, 0, 0, 0.02)',
                              border: theme.palette.mode === 'dark' 
                                ? '1px solid rgba(255, 255, 255, 0.08)' 
                                : '1px solid rgba(0, 0, 0, 0.08)',
                              boxShadow: theme.palette.mode === 'dark' 
                                ? '0 8px 32px rgba(0, 0, 0, 0.3)' 
                                : '0 8px 32px rgba(0, 0, 0, 0.1)',
                              width: '100%',
                              backdropFilter: 'blur(8px)',
                            }}
                          >
                            <Stack direction={'row'} gap={2}>
                              <div>
                                <Controller
                                  name={`timeSlots.${index}.startTime`}
                                  control={control}
                                  render={({ field }) => {
                                    const currentDate = watch('date');
                                    return (
                                      <FormControl error={Boolean(errors.timeSlots?.[index]?.startTime)} fullWidth>
                                        <TimePicker
                                          label="Start Time"
                                          value={field.value ? dayjs(field.value) : null}
                                          onChange={(newTime) => {
                                            if (newTime) {
                                              // Use current date from form, or default to today if not set
                                              const dateValue = currentDate || selectedDate || new Date();
                                              const date = dayjs(dateValue).isValid() ? dayjs(dateValue).startOf('day') : dayjs().startOf('day');
                                              const combinedDateTime = date
                                                .set('hour', newTime.hour())
                                                .set('minute', newTime.minute())
                                                .set('second', newTime.second());
                                              const utcDateTime = combinedDateTime.utc().toISOString();
                                              field.onChange(utcDateTime);
                                            } else {
                                              field.onChange('');
                                            }
                                          }}
                                        />
                                        {errors.timeSlots?.[index]?.startTime && (
                                          <FormHelperText>{errors.timeSlots?.[index]?.startTime.message}</FormHelperText>
                                        )}
                                      </FormControl>
                                    );
                                  }}
                                />
                              </div>

                              <div>
                                <Controller
                                  name={`timeSlots.${index}.endTime`}
                                  control={control}
                                  render={({ field }) => {
                                    const currentDate = watch('date');
                                    return (
                                      <FormControl error={Boolean(errors.timeSlots?.[index]?.endTime)} fullWidth>
                                        <TimePicker
                                          label="End Time"
                                          value={field.value ? dayjs(field.value) : null}
                                          onChange={(newTime) => {
                                            if (newTime) {
                                              // Use current date from form, or default to today if not set
                                              const dateValue = currentDate || selectedDate || new Date();
                                              const date = dayjs(dateValue).isValid() ? dayjs(dateValue).startOf('day') : dayjs().startOf('day');
                                              const combinedDateTime = date
                                                .set('hour', newTime.hour())
                                                .set('minute', newTime.minute())
                                                .set('second', newTime.second());
                                              const utcDateTime = combinedDateTime.utc().toISOString();
                                              field.onChange(utcDateTime);
                                            } else {
                                              field.onChange('');
                                            }
                                          }}
                                        />
                                        {errors.timeSlots?.[index]?.endTime && (
                                          <FormHelperText>{errors.timeSlots?.[index]?.endTime.message}</FormHelperText>
                                        )}
                                      </FormControl>
                                    );
                                  }}
                                />
                              </div>
                            </Stack>

                            <Stack direction={'row'} gap={2}>
                              <Controller
                                name={`timeSlots.${index}.slot`}
                                control={control}
                                render={({ field }) => (
                                  <FormControl error={Boolean(errors.timeSlots?.[index]?.slot)} sx={{ width: '70%' }}>
                                    <InputLabel id="demo-simple-select-label-checkk">Slot</InputLabel>
                                    <Select
                                      {...field}
                                      //   displayEmpty
                                      fullWidth
                                      labelId="demo-simple-select-label-checkk"
                                      id="demo-simple-select-checkk"
                                      label="Slot"
                                    >
                                      {slots.map((option, index) => (
                                        <MenuItem key={index} value={option._id}>
                                          {option.slotName} - {option.numberOfSlots}
                                        </MenuItem>
                                      ))}

                                      {/* Divider */}
                                      <MenuItem disabled sx={{ cursor: 'default', pointerEvents: 'none' }}>
                                        <hr style={{ width: '100%', borderColor: '#e0e0e0' }} />
                                      </MenuItem>

                                      {/* Create Button */}
                                      <MenuItem>
                                        <Button
                                          variant="contained"
                                          sx={{ textTransform: 'none', width: '100%' }}
                                          disableRipple
                                          onClick={() => {
                                            openSlotModal();
                                          }}
                                        >
                                          + Create New Slot
                                        </Button>
                                      </MenuItem>
                                    </Select>
                                    {errors.timeSlots?.[index]?.slot && (
                                      <FormHelperText>{errors.timeSlots?.[index]?.slot.message}</FormHelperText>
                                    )}
                                  </FormControl>
                                )}
                              />

                              <Controller
                                name={`timeSlots.${index}.slotChange`}
                                control={control}
                                render={({ field }) => (
                                  <FormControl
                                    error={Boolean(errors.timeSlots?.[index]?.slotChange)}
                                    sx={{ width: '30%' }}
                                  >
                                    <Select
                                      {...field}
                                      //   displayEmpty
                                      defaultValue="only-this-slot"
                                      fullWidth
                                      onChange={(e) => {
                                        if (e.target.value === 'all-slots') {
                                          const allSlotValue = watch(`timeSlots.${index}.slot`); // Get the current slot value for reference

                                          // Validate that a slot has been selected
                                          if (!allSlotValue) {
                                            enqueueSnackbar('Please select a slot first', { variant: 'warning' });
                                            setValue(
                                              `timeSlots.${index}.slotChange`,
                                              'only-this-slot',
                                              { shouldValidate: true }
                                            );
                                            return;
                                          }

                                          // Update all time slots with the selected slot value
                                          fields.forEach((el, i) => {
                                            setValue(
                                              `timeSlots.${i}.slotChange`,
                                              'all-slots',
                                              { shouldValidate: true, shouldDirty: true, shouldTouch: true }
                                            );
                                            setValue(
                                              `timeSlots.${i}.slot`,
                                              allSlotValue,
                                              { shouldValidate: true, shouldDirty: true, shouldTouch: true }
                                            );
                                          });
                                          
                                          enqueueSnackbar(`Applied slot to all ${fields.length} time slots`, { variant: 'success' });
                                        } else {
                                          setValue(
                                            `timeSlots.${index}.slotChange`,
                                            'only-this-slot',
                                            { shouldValidate: true, shouldDirty: true, shouldTouch: true }
                                          );
                                        }
                                      }}
                                    >
                                      <MenuItem value={'only-this-slot'}>
                                        Only this slot
                                      </MenuItem>
                                      <MenuItem value={'all-slots'}>
                                        All slots
                                      </MenuItem>
                                    </Select>
                                    {errors.timeSlots?.[index]?.slotChange && (
                                      <FormHelperText>{errors.timeSlots?.[index]?.slotChange.message}</FormHelperText>
                                    )}
                                  </FormControl>
                                )}
                              />
                            </Stack>
                            <Stack>
                              <Controller
                                name={`timeSlots.${index}.location`}
                                control={control}
                                render={({ field }) => (
                                  <FormControl error={Boolean(errors.timeSlots?.[index]?.location)} fullWidth>
                                    <InputLabel>Location</InputLabel>
                                    <OutlinedInput {...field} label="Location" />
                                    {errors.timeSlots?.[index]?.location && (
                                      <FormHelperText>{errors.timeSlots?.[index]?.location.message}</FormHelperText>
                                    )}
                                  </FormControl>
                                )}
                              />
                            </Stack>
                          </Stack>
                        </Stack>
                      ))}
                    </Stack>
                    <Stack direction={'row'} gap={2} sx={{ mt: 4, pt: 3, borderTop: theme.palette.mode === 'dark' ? '1px solid #4a5568' : '1px solid #e2e8f0' }}>
                      <Button 
                        variant="contained" 
                        type="submit"
                        size="large"
                        sx={{
                          minWidth: 120,
                          height: 48,
                          borderRadius: 3,
                          background: theme.palette.mode === 'dark' 
                            ? 'linear-gradient(135deg, #ffd700 0%, #ffed4a 100%)' 
                            : 'linear-gradient(135deg, #1a202c 0%, #2d3748 100%)',
                          color: theme.palette.mode === 'dark' ? '#1a202c' : '#ffffff',
                          fontWeight: 600,
                          textTransform: 'none',
                          fontSize: '1rem',
                          '&:hover': {
                            background: theme.palette.mode === 'dark' 
                              ? 'linear-gradient(135deg, #ffed4a 0%, #ffd700 100%)' 
                              : 'linear-gradient(135deg, #2d3748 0%, #4a5568 100%)',
                            transform: 'translateY(-2px)',
                            boxShadow: theme.palette.mode === 'dark' 
                              ? '0 8px 25px rgba(255, 215, 0, 0.3)' 
                              : '0 8px 25px rgba(26, 32, 44, 0.3)',
                          },
                          '&:disabled': {
                            background: theme.palette.mode === 'dark' ? '#4a5568' : '#e2e8f0',
                            color: theme.palette.mode === 'dark' ? '#a0aec0' : '#9ca3af',
                          },
                          transition: 'all 0.2s ease-in-out',
                          boxShadow: theme.palette.mode === 'dark' 
                            ? '0 4px 12px rgba(255, 215, 0, 0.2)' 
                            : '0 4px 12px rgba(26, 32, 44, 0.2)',
                        }}
                      >
                        💾 Save Schedule
                      </Button>
                      <Button
                        variant="outlined"
                        onClick={() =>
                          append({ startTime: '', endTime: '', location: '', slot: '', slotChange: 'only-this-slot' })
                        }
                        size="large"
                        sx={{
                          minWidth: 140,
                          height: 48,
                          borderRadius: 3,
                          border: theme.palette.mode === 'dark' ? '2px solid #4a5568' : '2px solid #e2e8f0',
                          color: theme.palette.mode === 'dark' ? '#a0aec0' : '#64748b',
                          fontWeight: 500,
                          textTransform: 'none',
                          fontSize: '1rem',
                          '&:hover': {
                            border: theme.palette.mode === 'dark' ? '2px solid #718096' : '2px solid #cbd5e0',
                            backgroundColor: theme.palette.mode === 'dark' 
                              ? 'rgba(113, 128, 150, 0.1)' 
                              : 'rgba(203, 213, 224, 0.1)',
                            transform: 'translateY(-1px)',
                          },
                          transition: 'all 0.2s ease-in-out',
                        }}
                      >
                        ➕ Add Time Slot
                      </Button>
                      <Button 
                        variant="text" 
                        onClick={handleClose}
                        size="large"
                        sx={{
                          minWidth: 100,
                          height: 48,
                          borderRadius: 3,
                          color: theme.palette.mode === 'dark' ? '#a0aec0' : '#64748b',
                          fontWeight: 500,
                          textTransform: 'none',
                          fontSize: '1rem',
                          '&:hover': {
                            backgroundColor: theme.palette.mode === 'dark' 
                              ? 'rgba(113, 128, 150, 0.1)' 
                              : 'rgba(203, 213, 224, 0.1)',
                            transform: 'translateY(-1px)',
                          },
                          transition: 'all 0.2s ease-in-out',
                        }}
                      >
                        Cancel
                      </Button>
                    </Stack>
                  </Stack>
                </form>
              </Box>
            </Box>
          </Box>
        </Fade>
      </Modal>
    </div>
  );
}