gistfile1.txt

import {
  Modal,
  ModalOverlay,
  ModalContent,
  ModalHeader,
  ModalFooter,
  ModalBody,
  ModalCloseButton,
  Button,
  FormControl,
  FormLabel,
  Input,
  Select,
  useToast
} from '@chakra-ui/react';
import React, { FormEvent, FC } from 'react';
import { MemberType } from '@/types/Group';

interface InviteModalProps {
isOpen: boolean;
onClose: () => void;
groupId: string;
}

const InviteModal: React.FC<InviteModalProps> = ({ isOpen, onClose, groupId }) => {
const toast = useToast();

const handleInvite = async (event: FormEvent<HTMLFormElement>) => {
  event.preventDefault();
  const email = (event.currentTarget.elements.namedItem('email') as HTMLInputElement).value;
  const role = (event.currentTarget.elements.namedItem('role') as HTMLInputElement).value as MemberType;

  try {
    const response = await fetch(`/api/groups/${groupId}/invite`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        invitees: [{ email, role }]
      })
    });

    if (!response.ok) throw new Error('Failed to send invite');

    toast({
      title: 'Invitation sent successfully',
      description: '',
      status: 'success',
      duration: 5000,
      isClosable: true
    });
    onClose();
  } catch (error) {
    const err = error as Error;
    toast({
      title: 'Error inviting member',
      description: err.message,
      status: 'error',
      duration: 5000,
      isClosable: true
    });
  }
};

return (
  <Modal isOpen={isOpen} onClose={onClose}>
    <ModalOverlay />
    <ModalContent>
      <ModalHeader>Invite Group Members</ModalHeader>
      <ModalCloseButton />
      <form onSubmit={handleInvite}>
        <ModalBody>
          <FormControl>
            <FormLabel>Email</FormLabel>
            <Input id="email" type="email" required />
          </FormControl>
          <FormControl mt={4}>
            <FormLabel>Role</FormLabel>
            <Select id="role" placeholder="Select role" required>
              <option value="" disabled>Select role</option>
              {Object.values(MemberType).map(type => (
                <option key={type} value={type}>{type}</option>
              ))}
            </Select>
          </FormControl>
        </ModalBody>
        <ModalFooter>
          <Button colorScheme="blue" mr={3} type="submit">
            Send Invite
          </Button>
          <Button variant="ghost" onClick={onClose}>Cancel</Button>
        </ModalFooter>
      </form>
    </ModalContent>
  </Modal>
);
};

export default InviteModal;