'use client';
import * as React from 'react';
import { View } from 'react-native';
import { useRenderElement } from '../../use-render/useRenderElement';
import { useId } from '../../hooks/useId';
import { EMPTY_OBJECT } from '../../utils/empty';
import type { ZestUIComponentProps } from '../../types';
import { SelectGroupContext } from './SelectGroupContext';

/**
 * Groups related select items with the corresponding label.
 * Renders a `<View>`.
 */
export function SelectGroup(componentProps: SelectGroup.Props) {
  const { render, className, style, ref, ...elementProps } = componentProps;

  const labelId = useId();

  const contextValue: SelectGroupContext = React.useMemo(() => ({ labelId }), [labelId]);

  const state: SelectGroupState = EMPTY_OBJECT;

  const element = useRenderElement(View, componentProps, {
    state,
    ref,
    props: [
      {
        role: 'group' as const,
        accessibilityLabelledBy: labelId,
        'aria-labelledby': labelId,
      },
      elementProps,
    ],
  });

  return <SelectGroupContext.Provider value={contextValue}>{element}</SelectGroupContext.Provider>;
}

export interface SelectGroupState {}

export interface SelectGroupProps extends ZestUIComponentProps<typeof View, SelectGroupState> {}

export namespace SelectGroup {
  export type State = SelectGroupState;
  export type Props = SelectGroupProps;
}