import React, { useState } from 'react';
import { ViewsDropdown } from './ViewsDropdown';
import { FiltersMap } from '@wix/bex-core';
import { setViewsState } from '../../state/setViewsState';
import { AllItemsViewProps, Category, View } from '../../model';
import { ToolbarCollectionState } from '../../state';
import { DropdownProps } from '@wix/design-system';

export interface CollectionViewsDropdownBaseProps<F extends FiltersMap> {
  /**
   * Array of view or category objects that appear as predefined views or groups of views.
   * @override [Category]()<F>[./?path=%2Fstory%2Fcommon-types--category] | [View](./?path=%2Fstory%2Fcommon-types--view)<F>[]
   * @external
   */
  presets?: Category<F>[] | Omit<View<F>, 'createdAt'>[];
  /**
   * Redirect URL for the **Learn More** button in the **Save View** modal.
   * @external
   */
  learnMoreLink?: string;
  /**
   * Function that is called when a view is saved.
   * @external
   */
  onSaveViewChanges?: (view: View<F>) => void | Promise<void>;
  /**
   * Function that is called when a new view is saved.
   * @external
   */
  onSaveView?: (view: View<F>) => void | Promise<void>;
  /**
   * Function that is called when a view is deleted.
   * @external
   */
  onDeleteView?: (view: View<F>) => void | Promise<void>;
  /**
   * Function that is called when a view is renamed.
   * @external
   */
  onRenameView?: (view: View<F>) => void | Promise<void>;
  /**
   * Function that is called when a view is set as the default view.
   * @external
   */
  onSetAsDefaultView?: (
    view: View<F>,
    isDefault: boolean,
  ) => void | Promise<void>;
  /**
   * Function that is called when a view is selected.
   * @external
   */
  onSelect?: (view: View<F>) => void;
  /**
   * Whether to show the total count for the selected view.
   * @default true
   * @external
   */
  showTotal?: boolean;
  /**
   * Information about how to handle the "All Items" view.
   * <br><br>
   * Supported properties:<br>
   * - `name`: [string] Display name instead of "All Items".<br>
   * - `hidden`: [bool] Whether to hide the "All Items" view from the list. Ignored if there are no preset views. Default: `false`.<br>
   * @external
   */
  allItemsViewProps?: AllItemsViewProps<F>;
  /**
   * Overrides the placeholder in the **Save View** modal.
   * @external
   */
  viewNamePlaceholder?: string;

  /**
   * The toolbar state that the dropdown is connected to.
   */
  toolbar: ToolbarCollectionState<any, F>;

  /**
   * An optional popover props to apply to the dropdown. Only relevant when this component is rendered outside of the Collection component.
   */
  popoverProps?: DropdownProps['popoverProps'];
}

export const CollectionViewsDropdownBase = <F extends FiltersMap>(
  props: CollectionViewsDropdownBaseProps<F>,
) => {
  const { toolbar, showTotal, onSelect, popoverProps, ...rest } = props;

  const [state] = useState(() => setViewsState(toolbar, rest));

  if (state == null) {
    return null;
  }

  return (
    <ViewsDropdown
      dataHook="collection-views"
      state={state}
      showTotal={showTotal}
      onSelect={onSelect}
      popoverProps={state ? popoverProps : undefined}
    />
  );
};
