1'use client';23import React, { useCallback, useState } from 'react';4import {useForm} from 'react-hook-form';5import {zodResolver} from '@hookform/resolvers/zod';6import {useMutation} from '@tanstack/react-query';7import {toast} from 'sonner';8import {Layers2Icon, Loader2} from 'lucide-react';9import { createWorkflowSchema, createWorkflowSchemaType } from '@/schema/workflow';10import { CreateWorkflow } from '@/actions/workflows/createWorkflow';11import { myLog } from '@/lib/utils';12import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel } from '@/components/ui/form';13import { Input } from '@/components/ui/input';14import { Textarea } from '@/components/ui/textarea';15import { Button } from '@/components/ui/button';1617function CreateWorkflowDialog({triggerText}: {triggerText?: string}) {18  const form = useForm<createWorkflowSchemaType>({19    resolver: zodResolver(createWorkflowSchema),20    defaultValues: {21      name: '',22      // description: '',23    },24  });2526  const {mutate, isPending} = useMutation({27    mutationFn: CreateWorkflow,28    onSuccess: () => {29      toast.success('Workflow created', {id: 'create-workflow'});30    },31    onError: (err) => {32      myLog('err onError', err);33      toast.error('Failed to create workflow', {id: 'create-workflow'});34    },35  });3637  const onSubmit = useCallback((values: createWorkflowSchemaType) => {38    toast.loading('Creating workflow...', {id: 'create-workflow'});39    myLog('values onSubmit', values);40    mutate(values);41  }, [mutate]);4243  return (44    ......45    <Form {...form}>46            <form className="w-full space-y-8" onSubmit={form.handleSubmit(onSubmit)}>47              <FormField 48                control={form.control}49                name="name"50                render={({field}) => {51                  myLog('field name', field);5253                  return (54                    <FormItem>55                      <FormLabel className="flex items-center gap-1">56                        Name57                        <p className="text-xs text-primary">(required)</p>58                      </FormLabel>59                      <FormControl>60                        <Input {...field} />61                      </FormControl>62                      <FormDescription>Choose a descriptive and unique name</FormDescription>63                    </FormItem>64                  );65                }}66              />6768              <FormField 69                control={form.control}70                name="description"71                render={({field}) => (72                  <FormItem>73                    <FormLabel className="flex items-center gap-1">74                      Description75                      <p className="text-xs text-muted-foreground">(optional)</p>76                    </FormLabel>77                    <FormControl>78                      <Textarea className='resize-none' {...field} />79                    </FormControl>80                    <FormDescription>81                      Provide a brief description of whate your workflow does.82                      <br />83                      This is optional but can help you remember the workflow&apos;s purpose84                    </FormDescription>85                  </FormItem>86                )}87              />88              <Button type='submit' className='w-full' disabled={isPending}>89                {!isPending && 'Proceed'}90                {isPending && <Loader2 className="animate-spin" />}91              </Button>92            </form>93          </Form>94    ......95  );96}9798export default CreateWorkflowDialog