<AttioRecordCombobox />

import React from "react"
import {Forms, useForm, showToast} from "attio/client"

export function RecordForm() {
  const {Form, SubmitButton, AttioRecordCombobox} = useForm(
    {
      person: Forms.attioRecord().object({slug: "people"}),
      company: Forms.attioRecord().object({slug: "companies"}),
      record: Forms.attioRecord(),
    },
    {},
  )
  return (
    <Form
      onSubmit={async (values) => {
        await showToast({
          title: "Form submitted",
          variant: "success",
          text: `Selected person: ${values.person?.recordId} (${values.person?.object}), company: ${values.company?.recordId} (${values.company?.object}), record: ${values.record?.recordId} (${values.record?.object})`,
        })
      }}
    >
      <AttioRecordCombobox label="Person" name="person" object="people" />
      <AttioRecordCombobox label="Company" name="company" object="companies" />
      <AttioRecordCombobox label="Record" name="record" />
      <SubmitButton label="Submit" />
    </Form>
  )
}