<WithState />

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

export function HelloWorldDialog() {
  const {Form, SubmitButton, Checkbox, TextInput, WithState} = useForm(
    {
      requireName: Forms.boolean(),
      name: Forms.string(),
    },
    {
      requireName: false,
      name: "",
    },
  )
  return (
    <Form
      onSubmit={async (values) => {
        await showToast({
          title: "Form submitted",
          variant: "success",
          text: JSON.stringify(values),
        })
      }}
    >
      <Checkbox label="Require name" name="requireName" />
      <WithState values>
        {({values}) => (values.requireName ? <TextInput label="Name" name="name" /> : <></>)}
      </WithState>
      <SubmitButton label="Submit" />
    </Form>
  )
}

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

export function SubmittingStateDialog() {
  const {Form, SubmitButton, TextInput, WithState} = useForm(
    {
      name: Forms.string(),
    },
    {
      name: "",
    },
  )
  return (
    <Form
      onSubmit={async (values) => {
        await new Promise((resolve) => setTimeout(resolve, 2_000))
        await showToast({
          title: "Form submitted",
          variant: "success",
          text: JSON.stringify(values),
        })
      }}
    >
      <TextInput label="Name" name="name" />

      <WithState submitting>
        {({submitting}) => (
          <Button
            label="Remove"
            variant="destructive"
            disabled={submitting}
            onClick={() => {
              // do something
            }}
          />
        )}
      </WithState>
      <SubmitButton label="Submit" />
    </Form>
  )
}