'use client'
import type { Props as CreateContentProps } from './create-content'
import { Popover, PopoverContent, PopoverTrigger } from '@langgenius/dify-ui/popover'
import * as React from 'react'
import { CreateContent } from './create-content'

type Props = Readonly<{
  open: boolean
  setOpen: (open: boolean) => void
  trigger: React.ReactNode
  popupLeft?: number
}> &
  CreateContentProps

export function CreateMetadataModal({
  open,
  setOpen,
  trigger,
  popupLeft = 20,
  ...createContentProps
}: Props) {
  const triggerElement = React.isValidElement(trigger) ? (
    trigger
  ) : (
    <button type="button">{trigger}</button>
  )

  return (
    <Popover open={open} onOpenChange={setOpen}>
      <PopoverTrigger render={triggerElement as React.ReactElement} />
      <PopoverContent
        placement="left-start"
        sideOffset={popupLeft}
        alignOffset={-38}
        popupClassName="w-[320px]"
      >
        <CreateContent
          {...createContentProps}
          onClose={() => setOpen(false)}
          onBack={() => setOpen(false)}
        />
      </PopoverContent>
    </Popover>
  )
}