'use client'
import type {FunctionComponent} from 'react'
import Combobox from '@/components/custom/combobox'
import {Button} from '@/components/ui/button'
import type {Profile} from '@/models/users'
import {updateUserRoleAction} from '@/serverFunctions/users'
import {Role} from '@/generated/prisma/enums'
import Form from '@/components/custom/form'
import {useZodValidatedForm} from '@/lib/useZodValidatedForm'
import {updateRoleSchema} from '@/schemas/userSchemas'

interface RoleColumnProps {
  user: Profile
}

const RoleColumn: FunctionComponent<RoleColumnProps> = ({user}) => {
  const [hookForm, updateUserRole] = useZodValidatedForm(updateRoleSchema, updateUserRoleAction)

  return (
    <Form className="flex gap-4" hookForm={hookForm} action={updateUserRole}>
      <input type="hidden" defaultValue={user.id} {...hookForm.register('id')} />
      <div className="grow">
        <Combobox
          data={Object.keys(Role).map(r => ({label: r, value: r}))}
          label="Role"
          initialValue={user.role}
          placeholder="Role"
          noResultText="No matching role found"
          {...hookForm.register('role')}
        />
      </div>
      <Button type="submit">Update</Button>
    </Form>
  )
}

export default RoleColumn
