import { createFileRoute, useNavigate } from '@tanstack/react-router'

import { MenuItemForm } from '#/components/admin/MenuItemForm.tsx'
import { withAdminGuard } from '#/lib/admin-guard.ts'
import {
  createMenuItem,
  getAllergenOptions,
  getMachineTagOptions,
} from '#/server/menu-admin.ts'

const NewMenuItemRoute = () => {
  const { machineTags, allergenOptions } = Route.useLoaderData()
  const navigate = useNavigate()

  return (
    <section>
      <h1>Add menu item</h1>
      <MenuItemForm
        machineTags={machineTags}
        allergenOptions={allergenOptions}
        submitLabel="Create item"
        onSubmit={async (input) => {
          await createMenuItem({ data: input })
          await navigate({ to: '/admin/menu', viewTransition: false })
        }}
      />
    </section>
  )
}

export const Route = createFileRoute('/admin/menu/new')({
  loader: () =>
    withAdminGuard(async () => ({
      machineTags: await getMachineTagOptions(),
      allergenOptions: await getAllergenOptions(),
    })),
  component: NewMenuItemRoute,
})