'use client';
import { Text } from 'react-native';
import { useSliderRootContext } from '../root/SliderRootContext';
import { useStoreState } from '../../store/ReactStore';
import { useRenderElement } from '../../use-render/useRenderElement';
import { formatNumber } from '../../utils/formatNumber';
import { getSliderRootState } from '../store/SliderStore';
import type { SliderRootState } from '../root/SliderRoot';
import type { ZestUIComponentProps } from '../../types';

/**
 * The formatted value of the slider.
 * Renders a `<Text>`.
 */
export function SliderValue(componentProps: SliderValue.Props) {
  const { render, className, style, children, ref, ...elementProps } = componentProps;

  const store = useSliderRootContext();

  const values = useStoreState(store, 'values');

  const { format, locale } = store.context;

  const formatted = values.map((value) => formatValue(value, format, locale));

  const resolvedChildren =
    typeof children === 'function' ? children(formatted, values) : (children ?? formatted.join(' – '));

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

function formatValue(
  value: number,
  format: Intl.NumberFormatOptions | undefined,
  locale: Intl.LocalesArgument | undefined,
) {
  if (!format) {
    return String(value);
  }

  return formatNumber(value, locale, format);
}

export interface SliderValueState extends SliderRootState {}

export interface SliderValueProps
  extends Omit<ZestUIComponentProps<typeof Text, SliderValueState>, 'children'> {
  children?:
    | React.ReactNode
    | ((formattedValues: string[], values: readonly number[]) => React.ReactNode);
}

export namespace SliderValue {
  export type State = SliderValueState;
  export type Props = SliderValueProps;
}