import React from 'react';
import { Pressable, View } from 'react-native';

import type { AccordionTriggerProps } from '../../../../types/accordion';
import { AccordionItemContext } from './AccordionItemContext';

/*** Renders the accessible button that toggles its owning accordion item. */
export function AccordionTrigger({
  children,
  disabled = false,
  interactionPolicy,
  ...pressableProps
}: AccordionTriggerProps) {
  const item = React.use(AccordionItemContext);
  if (!item) throw new Error('AccordionTrigger must be rendered inside AccordionItem.');

  const resolvedDisabled = item.disabled || disabled;
  const resolvedInteractionPolicy = interactionPolicy ?? item.interactionPolicy;

  return (
    <View accessibilityRole="header">
      <Pressable
        {...pressableProps}
        accessibilityRole="button"
        accessibilityState={{ disabled: resolvedDisabled, expanded: item.open }}
        disabled={resolvedDisabled}
        nativeID={item.triggerId}
        onPress={resolvedInteractionPolicy === 'passive' ? undefined : item.toggle}
      >
        {children}
      </Pressable>
    </View>
  );
}