import { Box, Loader, Text, TextButton } from '@wix/design-system';
import React, { ReactNode } from 'react';
import { CollectionState, FiltersMap } from '@wix/bex-core';
import { useWixPatternsContainer } from '@wix/bex-core/react';
import { useDropdownTranslationContext } from '../providers';

export interface UseFilterCollectionStateOptionsParams<
  T,
  F extends FiltersMap,
> {
  collection: CollectionState<T, F>;
  fixedFooter: ReactNode;
}

export function useFilterCollectionStates<T, F extends FiltersMap>(
  params: UseFilterCollectionStateOptionsParams<T, F>,
): {
  fixedFooter?: ReactNode;
  showInitialLoader?: boolean;
} {
  const { collection, fixedFooter } = params;
  const { errorHandler } = useWixPatternsContainer();
  const { translate } = useDropdownTranslationContext();

  const getEmptyStateText = () => {
    if (collection.hasAvailableItems) {
      return translate('noResultsState');
    }
    return translate('emptyState');
  };

  const getFixedFooter = (
    dataHook: string,
    content: ReactNode,
    paramsFixedFooter?: ReactNode,
  ) => (
    <Box align="left" direction="vertical">
      <Box
        dataHook={dataHook}
        verticalAlign="middle"
        align="center"
        direction="vertical"
        width="100%"
      >
        <Box padding="SP2">{content}</Box>
      </Box>
      {paramsFixedFooter}
    </Box>
  );

  if (
    collection.showInitialLoader ||
    collection.result.status.isLoading ||
    collection.showRefreshLoader
  ) {
    return {
      showInitialLoader: true,
      fixedFooter: getFixedFooter('initial-loader', <Loader size="small" />),
    };
  }

  if (collection.showEmptyState) {
    return {
      fixedFooter: getFixedFooter(
        'empty-state',
        <Text dataHook="empty-state-text" secondary size="small">
          {getEmptyStateText()}
        </Text>,
        params.fixedFooter,
      ),
    };
  }

  if (collection.showErrorState) {
    const resolvedError = errorHandler.getResolvedError?.(
      collection.result.errorStatus?.error,
    );

    if (resolvedError) {
      return {
        fixedFooter: getFixedFooter(
          'filter-error-state',
          <Box
            direction="vertical"
            gap="SP1"
            verticalAlign="middle"
            align="center"
          >
            <Text
              dataHook="filter-error-state-text"
              secondary
              align="center"
              weight="thin"
              size="small"
            >
              {resolvedError.message}
              {resolvedError.action && (
                <TextButton
                  onClick={async () => {
                    await resolvedError.action?.onClick?.();
                  }}
                >
                  {resolvedError.action.text}
                </TextButton>
              )}
            </Text>
            {resolvedError.action && (
              <TextButton
                size="small"
                weight="thin"
                onClick={async () => {
                  await resolvedError.action?.onClick?.();
                }}
              >
                {resolvedError.action.text}
              </TextButton>
            )}
          </Box>,
        ),
      };
    }
  }

  return {
    fixedFooter,
  };
}