import InputError from '@/components/input-error';
import LoadingButton from '@/components/loading-button';
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { SharedData } from '@/types/global';
import { useForm, usePage } from '@inertiajs/react';
import { ReactNode, useState } from 'react';

interface Props {
   actionComponent: ReactNode;
}

const InviteForm = ({ actionComponent }: Props) => {
   const { props } = usePage<SharedData>();
   const { translate } = props;
   const { dashboard, input, common, button } = translate;
   const [open, setOpen] = useState(false);

   const { data, post, setData, processing, errors, reset } = useForm({
      name: '',
      email: '',
      status: 1,
   });

   const handleSubmit = (e: React.FormEvent) => {
      e.preventDefault();

      post(route('users.store'), {
         onSuccess: () => {
            reset();
            setOpen(false);
         },
      });
   };

   return (
      <Dialog open={open} onOpenChange={setOpen}>
         <DialogTrigger asChild>{actionComponent}</DialogTrigger>
         <DialogContent>
            <DialogHeader>
               <DialogTitle>{dashboard.invite_user}</DialogTitle>
               <p className="text-muted-foreground text-sm">{dashboard.invite_user_description}</p>
            </DialogHeader>

            <form onSubmit={handleSubmit} className="mt-4 space-y-4 text-start">
               <div>
                  <Label>{input.name}</Label>
                  <Input required value={data.name} onChange={(e) => setData('name', e.target.value)} />
                  <InputError message={errors.name} />
               </div>

               <div>
                  <Label>{input.email}</Label>
                  <Input type="email" required value={data.email} onChange={(e) => setData('email', e.target.value)} />
                  <InputError message={errors.email} />
               </div>

               <div>
                  <Label>{input.status}</Label>
                  <Select value={data.status === 1 ? 'active' : 'inactive'} onValueChange={(value) => setData('status', value === 'active' ? 1 : 0)}>
                     <SelectTrigger>
                        <SelectValue placeholder={dashboard.select_approval_status} />
                     </SelectTrigger>
                     <SelectContent>
                        <SelectItem value="active">{common.active}</SelectItem>
                        <SelectItem value="inactive">{common.inactive}</SelectItem>
                     </SelectContent>
                  </Select>
                  <InputError message={errors.status} />
               </div>

               <LoadingButton loading={processing} className="w-full">
                  {button.send ?? button.submit}
               </LoadingButton>
            </form>
         </DialogContent>
      </Dialog>
   );
};

export default InviteForm;