'use client';
import { Text } from 'react-native';
import { useSliderRootContext } from '../root/SliderRootContext';
import { useRenderElement } from '../../use-render/useRenderElement';
import { useId } from '../../hooks/useId';
import { useIsoLayoutEffect } from '../../hooks/useIsoLayoutEffect';
import { getSliderRootState } from '../store/SliderStore';
import type { SliderRootState } from '../root/SliderRoot';
import type { ZestUIComponentProps } from '../../types';

/**
 * An accessible label that is automatically associated with the slider thumbs.
 * Renders a `<Text>`.
 *
 * Upstream also focuses a thumb when the label is pressed. React Native has no
 * programmatic focus for a `View`, and the thumb is `accessibilityRole="adjustable"`
 * already, so the association is expressed purely through `accessibilityLabelledBy`.
 */
export function SliderLabel(componentProps: SliderLabel.Props) {
  const { render, className, style, nativeID: idProp, ref, ...elementProps } = componentProps;

  const store = useSliderRootContext();

  const id = useId(idProp ?? undefined);

  useIsoLayoutEffect(() => {
    store.context.setLabelId(id);
    return () => store.context.setLabelId(undefined);
  }, [id, store]);

  return useRenderElement(Text, componentProps, {
    state: getSliderRootState(store),
    ref,
    props: [{ nativeID: id }, elementProps],
  });
}

export interface SliderLabelState extends SliderRootState {}

export interface SliderLabelProps extends ZestUIComponentProps<typeof Text, SliderLabelState> {}

export namespace SliderLabel {
  export type State = SliderLabelState;
  export type Props = SliderLabelProps;
}