'use server';

import { z  } from 'zod'


const createCharacterSchema = z.object({
    name: z.string().min(2).regex(/[a-zA-Z]+$/, { message: 'Must be a single name. No symbols, spaces or dashes.' })
})

interface CreateCharacterFormState{
    errors: {
        name?: string[];
    }
}

export async function createCharacter(formState: CreateCharacterFormState, formData: FormData ): Promise<CreateCharacterFormState>{
    const result = createCharacterSchema.safeParse({
        name: formData.get('name'),
    })
    
    if (!result.success){
        return {
            errors: result.error.flatten().fieldErrors
        }
    }
    
    return {
        errors: {}
    }
    // TODO Revalidate the character select screen
}

'use client'
import { experimental_useFormState as useFormState } from 'react-dom'
import { 
    Input,
    Button,
    Popover,
    PopoverTrigger,
    PopoverContent
} from '@nextui-org/react'
import * as actions from '@/actions'

export default function CharCreateForm() {
    const [formState, action ] = useFormState(actions.createCharacter, {
        errors: {}
    })
   
    return (
        <Popover placement="left">
            <PopoverTrigger>
                <Button color="primary">Create new character</Button>
            </PopoverTrigger>
            <PopoverContent>
                <form action={action}>
                    <div className="flex flex-col gap-4 w-80">
                        <h3 className="text-lg">
                            Create a new character
                        </h3>
                        <Input 
                            name="name" 
                            label="Name" 
                            labelPlacement="outside" 
                            placeholder="Name"
                            isInvalid={!!formState.errors.name}
                            errorMessage={formState.errors.name?.join(',')}
                        />
                        <Button type="submit">Create</Button>
                    </div>    
                </form>
            </PopoverContent>
        </Popover>
    )
}

 ▲ Next.js 15.0.0-canary.1
   Creating an optimized production build ...
 ⚠ Found lockfile missing swc dependencies, run next locally to automatically patch
 ⚠ Found lockfile missing swc dependencies, run next locally to automatically patch
 ⚠ Found lockfile missing swc dependencies, run next locally to automatically patch
 ⚠ Compiled with warnings
./src/components/characters/CharCreateForm.tsx
Attempted import error: 'experimental_useFormState' is not exported from 'react-dom' (imported as 'useFormState').
Import trace for requested module:
./src/components/characters/CharCreateForm.tsx
 ✓ Compiled successfully
   Linting and checking validity of types ...
   Collecting page data ...
 ⚠ Found lockfile missing swc dependencies, run next locally to automatically patch
   Generating static pages (0/5) ...
   Generating static pages (1/5) 
   Generating static pages (2/5) 
   Generating static pages (3/5) 
 ✓ Generating static pages (5/5)
   Finalizing page optimization ...
   Collecting build traces ...