import React, { CSSProperties, ReactElement, ReactNode } from 'react';
import { observer } from 'mobx-react-lite';
import { ComputedQuery, FiltersMap, PickerState } from '@wix/bex-core';
import {
  Box,
  BoxProps,
  SkeletonCircle,
  SkeletonGroup,
  SkeletonLine,
} from '@wix/design-system';
import { PickerEmptyStateContainer } from '../PickerEmptyState/PickerEmptyStateContainer';

export interface PickerProps<T, F extends FiltersMap> {
  dataHook?: BoxProps['dataHook'];
  flex?: CSSProperties['flex'];
  state: PickerState<T, F>;
  renderError: (params: { err: unknown; isOnline: boolean }) => ReactElement;
  renderEmptyState?: (params: {
    hasAvailableItems: boolean;
    query: ComputedQuery<F>;
  }) => ReactElement | null | undefined;
  hasFilterDropdown?: boolean;
  children: ReactNode;
}

function _Picker<T, F extends FiltersMap = FiltersMap>(
  props: PickerProps<T, F>,
) {
  const {
    state,
    renderEmptyState,
    renderError,
    dataHook,
    children,
    flex,
    hasFilterDropdown,
  } = props;
  const { collection, minContentHeight } = state;
  const {
    showRefreshLoader,
    result: { status, isEmptyAndNotFetching },
  } = collection;

  let child: ReactNode;
  if (status.isIdle || showRefreshLoader) {
    // the loader container should be according to the last number of items height (`contentHeight`)
    child = (
      <SkeletonGroup>
        <Box
          direction="vertical"
          width="100%"
          minHeight={minContentHeight}
          dataHook="search-loader"
          gap="0"
        >
          {Array.from({ length: 8 }).map((_, index) => (
            <>
              <Box
                key={index}
                direction="horizontal"
                gap="24px"
                padding="12px 24px"
                align="center"
                verticalAlign="middle"
                justifyItems="center"
              >
                <SkeletonCircle diameter="48px" />
                <Box direction="vertical" gap="6px" flex="1">
                  <SkeletonLine width="120px" />
                  <SkeletonLine width="240px" />
                </Box>
              </Box>
            </>
          ))}
        </Box>
      </SkeletonGroup>
    );
  } else if (status.isError) {
    child = renderError({
      err: status.error,
      isOnline: collection.isOnline(),
    });
    child = (
      <Box
        align="center"
        verticalAlign="middle"
        paddingTop="SP2"
        paddingBottom="SP9"
        height="100%"
        minHeight={minContentHeight}
      >
        {child}
      </Box>
    );

    child = (
      <Box direction="vertical" overflow="auto">
        {child}
      </Box>
    );
  } else if (isEmptyAndNotFetching) {
    child = (
      <PickerEmptyStateContainer
        state={state}
        hasFilterDropdown={hasFilterDropdown}
        renderEmptyState={renderEmptyState}
      />
    );
  } else {
    child = (
      <Box minHeight={minContentHeight} direction="vertical">
        {children}
      </Box>
    );
  }

  return (
    <Box dataHook={dataHook} direction="vertical" overflow="hidden" flex={flex}>
      {child}
    </Box>
  );
}

export const Picker = observer(_Picker);