import React, { ReactNode } from 'react';
import { observer } from 'mobx-react-lite';
import { Box, Loader } from '@wix/design-system';
import { NestedTableNodeState } from '../../state/NestedTableState/NestedTableNodeState';
import { ErrorState } from '../ErrorState';
import { CollectionEmptyState } from '../EmptyState/CollectionEmptyState';

export interface PlaceholderStatesProps {
  state: NestedTableNodeState<any, any, any>;
}

function _NestedTableRowPlaceholderStates(props: PlaceholderStatesProps) {
  const { state } = props;

  const {
    initTask,
    showLoadingState,
    showEmptyState,
    showErrorState,
    errorStatus,
  } = state;

  let child: ReactNode;

  if (initTask.status.isError) {
    child = (
      <ErrorState
        state={state}
        errorStatus={initTask.errorStatus}
        dataHook="error-state"
        image={undefined}
      />
    );
  } else if (showLoadingState) {
    child = (
      <Box padding="12px">
        <Loader dataHook="loading-state" size="small" />
      </Box>
    );
  } else if (showErrorState && errorStatus) {
    child = (
      <ErrorState state={state} dataHook="error-state" image={undefined} />
    );
  } else if (showEmptyState) {
    child = (
      <CollectionEmptyState
        dataHook="empty-state"
        image={null}
        addNewCta={{
          onClick: () => {
            state.levelDescriptor.onAddNewClick?.();
          },
        }}
      />
    );
  }

  return <>{child}</>;
}

export const NestedTableRowPlaceholderStates = observer(
  _NestedTableRowPlaceholderStates,
);