import { trackSplit, track } from 'ripple';
import type { ViewProps } from '@zag-js/date-picker';
import { DatePickerViewPropsContext } from './use-date-picker-view-props-context';
import { useDatePickerContext } from './use-date-picker-context';
import { datePickerAnatomy } from './date-picker.anatomy';
import { ark } from '../factory';
import type { HTMLProps, MaybeTracked, PolymorphicProps } from '../../types';

export interface DatePickerViewBaseProps extends PolymorphicProps<'div'>, Required<ViewProps> {}
export interface DatePickerViewProps extends HTMLProps<'div'>, DatePickerViewBaseProps {}

export component DatePickerView(props: MaybeTracked<DatePickerViewProps>) {
  const [children, view, localProps] = trackSplit(props, ['children', 'view']);
  const datePicker = useDatePickerContext();

  const viewProps = track(() => ({ view: @view }));

  DatePickerViewPropsContext.set(viewProps);

  <ark.div
    hidden={@datePicker.view !== @view}
    {...datePickerAnatomy.build().view.attrs}
    {...@localProps}
  >
    <@children />
  </ark.div>
}