import { createFileRoute } from '@tanstack/react-router'
import { useForm } from '@tanstack/react-form'

export const Route = createFileRoute('/')({
  component: Home,
})

import { z } from 'zod'


const createDeclarationFormSchema = z.object({
  consignments: z.array(z.object({
    id: z.string(),
    goodsItems: z.array(z.object({
      id: z.string(),
      commodityCode: z.string(),
      netMass: z.number(),
      arr2: z.array(z.object({
        id: z.string(),
      }))
    }))
  })),
})

import { generateMock } from "@anatine/zod-mock";

const mockDeclarationFormSchema = generateMock(createDeclarationFormSchema)

function Home() {
  // const defaultValues: z.infer<typeof createDeclarationFormSchema> = {
  //   consignments: [],
  // }
  const defaultValues = mockDeclarationFormSchema
  console.log(defaultValues)
  return (
    <MyForm defaultValues={defaultValues} />
  )
}


export function MyForm({ defaultValues }) {
  function handleSubmit(value: z.infer<typeof createDeclarationFormSchema>) {
    console.log(value)
  }

  const form = useForm({
    defaultValues,
    validators: {
      onSubmit: createDeclarationFormSchema,
    },
    onSubmit: ({ value }) => handleSubmit(value),
  })


  return (
    <div className="p-2">
      <form
        onSubmit={(e) => {
          e.preventDefault()
          form.handleSubmit()
        }}
        className="space-y-8"
      >


        <Tab form={form} />
        {/* <form.Field name="consignments">
          {(field) => (
            <div className="space-y-3">
              <div>
              </div>
            </div>
          )}
        </form.Field> */}

      </form>
    </div>
  )
}




export function Tab({ form }) {
  return (
    <div className="space-y-4 pt-6">
      <DocumentList form={form} />
    </div>
  )
}

function DocumentList({
  form,
}) {
  return (
    <form.Field name="consignments" mode="array">
      {(field) => (
        <>
          {field.state.value && field.state.value.length > 0 ? (
            <div className="">
              {field.state.value.map((consignment, index) => (
                <ConsignmentItem
                  key={consignment.id}
                  consignment={consignment}
                  index={index}
                  form={form}
                />
              ))}
            </div>
          ) : (
            <div className="text-sm text-muted-foreground">
              No consignments
            </div>
          )}
        </>
      )}
    </form.Field>
  )
}


function ConsignmentItem({ consignment, index, form, consignmentField }: any) {
  return (
    <GoodsItems form={form} index={index} />
  )
}


function GoodsItems({ form, index }: any) {
  return (
    <div className="space-y-2">
      <form.Field name={`consignments[${index}].goodsItems`} mode="array">
        {(goodsItemsField) => (
          <div className="">
            {goodsItemsField.state.value &&
              goodsItemsField.state.value.length > 0 ? (
              <div>
                {goodsItemsField.state.value.map((item, itemIndex) => (
                  <div className="px-8" key={item.id}>
                    <GoodsItemEditor form={form} index={index} itemIndex={itemIndex} goodsField={goodsItemsField} />
                  </div>
                )
                )}
              </div>
            ) : (
              <div className="text-sm text-muted-foreground">
                No goods
              </div>
            )
            }
          </div >
        )}
      </form.Field >
    </div >
  )
}


function GoodsItemEditor({ form, index, itemIndex, goodsField }: any) {
  return (
    <div className="min-h-[220px] py-6">
      <div className="grid grid-cols-2 gap-4 rounded-sm ">
        <form.Field
          name={`consignments[${index}].goodsItems[${itemIndex}].commodityCode`}
        >
          {(field) => (
            <div className="space-y-1">
              <div className="text-xs text-muted-foreground" onClick={() => {
                const val = form.state.values.consignments[index].goodsItems[itemIndex]
                console.log(val)
                console.log(form.state.values.consignments[index].goodsItems)
                const newValues = form.state.values.consignments[index].goodsItems.filter((_, i) => i !== itemIndex)
                console.log(newValues)
                // form.setFieldValue(`consignments[${index}].goodsItems`, newValues)
                goodsField.removeValue(itemIndex)
                setTimeout(() => {
                  console.log(form.state.values.consignments[index].goodsItems)
                }, 1000)
              }}>
                Commodity Code
              </div>
              <div>
              </div>
            </div>
          )}
        </form.Field>
      </div>
    </div>
  )
}