import React from 'react'
import { createFileRoute } from '@tanstack/react-router'
import { p as MyText, AppContainer } from 'web-components'
import SlotForm from '../components/SlotForm'
import { trpc } from '@/lib/trpc-client'

export const Route = createFileRoute('/dashboard/slots/new')({
  validateSearch: (s: Record<string, unknown>) => ({
    baseslot: (s.baseslot as string) ?? ''
  }),
  component: AddSlot,
})

function AddSlot() {
  const { baseslot } = Route.useSearch()
  const baseSlotId = baseslot ? parseInt(baseslot as string) : null

  const { refetch } = trpc.admin.slots.getAll.useQuery()
  const { data: baseSlotData, isLoading } = trpc.admin.slots.getSlotById.useQuery(
    { id: baseSlotId! },
    { enabled: !!baseSlotId }
  )

  const handleSlotAdded = () => {
    refetch()
    window.history.back()
  }

  if (isLoading && baseSlotId) {
    return (
      <AppContainer>
        <div className="flex flex-1 flex-col items-center justify-center">
          <MyText>Loading base slot...</MyText>
        </div>
      </AppContainer>
    )
  }

  return (
    <AppContainer>
      <SlotForm
        onSlotAdded={handleSlotAdded}
        initialProductIds={baseSlotData?.slot?.products?.map((p: any) => p.id) || []}
        initialGroupIds={baseSlotData?.slot?.groupIds || []}
      />
    </AppContainer>
  )
}