import { memo } from 'react';

import { Box, Text, Heading } from 'components/common';
import { ErrorBoundary } from 'components/ErrorBoundary';

import { MultiselectFilter } from './MultiselectFilter';
import { LocationSearchFilter } from './LocationSearchFilter';
import { RangeFilter } from './RangeFilter';
import { DateRangeFilter } from './DateRangeFilter';

export const FILTERS: Record<string, any> = {
  multiselect: MultiselectFilter,
  location: LocationSearchFilter,
  range: RangeFilter,
  daterange: DateRangeFilter,
};

export const FilterItem = ({
  label,
  children,
}: {
  label: string;
  children: React.ReactNode;
}) => {
  return (
    <Box>
      <Box paddingX={3} paddingY={2}>
        <Text size="s" weight="medium">
          {label}
        </Text>
      </Box>
      {children}
    </Box>
  );
};

export const FilterGroup = ({
  name,
  children,
}: {
  name: string;
  children: React.ReactNode;
}) => {
  return (
    <Box>
      <Box paddingX={3} paddingY={2}>
        <Heading size="s">{name}</Heading>
      </Box>
      {children}
    </Box>
  );
};

export type FilterGroupData = {
  id: string;
  name: string;
  filters: {
    id: string;
    type: string;
    label: string;
  }[];
};

interface FilterGroupsProps {
  items: FilterGroupData[];
}

export const FilterGroups = memo<FilterGroupsProps>(({ items }) => {
  if (items) {
    return (
      <>
        {items.map((group) => {
          return (
            <FilterGroup name={group.name} key={group.id}>
              {group.filters?.map((filter) => {
                const type = filter.type.toLowerCase();
                const FilterInput = FILTERS[type];
                if (FilterInput) {
                  return (
                    <FilterItem label={filter.label} key={filter.id}>
                      <ErrorBoundary>
                        <FilterInput {...filter} />
                      </ErrorBoundary>
                    </FilterItem>
                  );
                } else {
                  return null;
                }
              })}
            </FilterGroup>
          );
        })}
      </>
    );
  } else {
    return null;
  }
});