import React, { PropsWithChildren, useEffect } from 'react';
import { FilterProps } from '../../model';
import { MultiInlineCheckbox } from '../MultiInlineCheckbox';
import { BoxProps, CheckboxProps } from '@wix/design-system';
import { useDropdownSelectFilterState } from '../../hooks';

export interface MultiInlineCheckboxFilterProps<V>
  extends FilterProps<V[]>,
    Partial<Omit<BoxProps, 'filter'>> {
  /**
   * List of items to select from
   * @external
   */
  data: V[];
  /**
   * A function that returns checkbox props for rendering each item checkbox
   * @external
   */
  renderItem?: (
    item: V,
    index: number,
  ) => Partial<PropsWithChildren<CheckboxProps>>;
}

export function MultiInlineCheckboxFilter<V>(
  props: MultiInlineCheckboxFilterProps<V>,
) {
  const { filter, ...rest } = props;

  const state = useDropdownSelectFilterState<V>({
    filter,
  });

  useEffect(() => state.init(), []);

  return (
    <MultiInlineCheckbox
      dataHook={`collection-filter-${filter.name}`}
      gap="SP3"
      state={state.dropdownSelect}
      {...rest}
    />
  );
}

MultiInlineCheckboxFilter.displayName = 'MultiInlineCheckboxFilter';