import React from 'react';
import { observer } from 'mobx-react-lite';
import { useToolbarCollectionContext } from '../ToolbarCollectionContext';
import { QueryResultStatusError, TaskState } from '@wix/bex-core';
import { TableSkeleton } from '../TableSkeleton/TableSkeleton';
import {
  PlaceholderStatesBase,
  PlaceholderStatesBaseProps,
} from '../PlaceholderStates/PlaceholderStatesBase';
import { TableProps } from '@wix/design-system';

export interface TablePlaceholderStatesProps
  extends Omit<PlaceholderStatesBaseProps, 'state' | 'loadingState'> {
  state: {
    initTask: TaskState<unknown>;
    showLoadingState: boolean;
    showEmptyState: boolean;
    hasAvailableItems: boolean;
    resultOriginQuerySearch?: string;
    hasNonPersistentActiveFilters: boolean;
    showErrorState: boolean;
    errorStatus: QueryResultStatusError<unknown, unknown> | null | undefined;
    retryErrorState: () => void;
  };
  rowVerticalPadding?: TableProps['rowVerticalPadding'];
  showTitleBar?: boolean;
}

function _TablePlaceholderStates(props: TablePlaceholderStatesProps) {
  const state = useToolbarCollectionContext();

  return (
    <PlaceholderStatesBase
      loadingState={
        <TableSkeleton
          dataHook="placeholder-states-loading-state"
          state={state}
          rowVerticalPadding={props.rowVerticalPadding}
          showTitleBar={props.showTitleBar}
        />
      }
      {...props}
    />
  );
}

export const TablePlaceholderStates = observer(_TablePlaceholderStates);