import type { StageTriggerProps } from '@zag-js/floating-panel'
import { mergeProps } from '@zag-js/solid'
import { createSplitProps } from '../../utils/create-split-props.ts'
import { type HTMLProps, type PolymorphicProps, ark } from '../factory.tsx'
import { useFloatingPanelContext } from './use-floating-panel-context.ts'

export interface FloatingPanelStageTriggerBaseProps extends PolymorphicProps<'button'>, StageTriggerProps {}
export interface FloatingPanelStageTriggerProps extends HTMLProps<'button'>, FloatingPanelStageTriggerBaseProps {}

export const FloatingPanelStageTrigger = (props: FloatingPanelStageTriggerProps) => {
  const [stage, localProps] = createSplitProps<StageTriggerProps>()(props, ['stage'])
  const floatingPanel = useFloatingPanelContext()
  const mergedProps = mergeProps(() => floatingPanel().getStageTriggerProps(stage), localProps)

  return <ark.button {...mergedProps} />
}
