import { UseFormReturn, useWatch } from 'react-hook-form'
import {
  FormField,
  InputGroup,
  InputGroupAddon,
  InputGroupInput,
  InputGroupText,
  Separator,
  SheetSection,
} from 'ui'
import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'

import { CreateQueueForm } from './CreateQueueSheet.schema'

export function PartitionConfigFields({ form }: { form: UseFormReturn<CreateQueueForm> }) {
  const queueType = useWatch({ control: form.control, name: 'values.type' })

  if (queueType !== 'partitioned') return null

  return (
    <>
      <SheetSection className="flex flex-col gap-3">
        <FormField
          control={form.control}
          name="values.partitionInterval"
          render={({ field: { ref, ...rest } }) => (
            <FormItemLayout
              label="Partition interval"
              description="Number of messages per partition"
              className="gap-1"
            >
              <InputGroup>
                <InputGroupInput {...rest} type="number" placeholder="10000" />
                <InputGroupAddon align="inline-end">
                  <InputGroupText>messages</InputGroupText>
                </InputGroupAddon>
              </InputGroup>
            </FormItemLayout>
          )}
        />
        <FormField
          control={form.control}
          name="values.retentionInterval"
          render={({ field: { ref, ...rest } }) => (
            <FormItemLayout
              label="Retention interval"
              description="Partitions older than this many messages behind the latest will be dropped"
              className="gap-1"
            >
              <InputGroup>
                <InputGroupInput {...rest} type="number" placeholder="10000" />
                <InputGroupAddon align="inline-end">
                  <InputGroupText>messages</InputGroupText>
                </InputGroupAddon>
              </InputGroup>
            </FormItemLayout>
          )}
        />
      </SheetSection>
      <Separator />
    </>
  )
}