import CardContainer from '@design-system/CardContainer';
import Checkbox from '@design-system/Checkbox/Checkbox';
import InputSearch from '@design-system/Inputs/Search';
import Spinner from '@design-system/ProgressIndicators/Spinner';
import StateCard from '@design-system/StateCard';
import Stack from '@mui/material/Stack';

import { type FilterAccordionContentProps } from './types';

const FilterAccordionContent = ({
  searchLabel = 'Search',
  noResultsTitle = 'No results',
  noResultsDescription = 'Try different search terms',
  loading = false,
  allCheckboxProps,
  slotProps,
  onChangeSearch,
  searchValue,
  items,
  getItemCheckboxProps,
  hasMoreItems,
  loadMoreTriggerRef,
}: FilterAccordionContentProps) => {
  const hasResults = items.length > 0;

  if (loading) {
    return <Spinner />;
  }

  return (
    <Stack
      {...slotProps?.root}
      sx={{ gap: 1, ...slotProps?.root?.sx }}
    >
      <InputSearch
        placeholder={searchLabel}
        onChange={onChangeSearch}
        value={searchValue}
      />
      <CardContainer fullWidth>
        <Stack
          sx={{
            gap: 2,
            maxHeight: 272,
            overflowY: 'auto',
            overscrollBehavior: 'contain',
          }}
        >
          {hasResults && <Checkbox {...allCheckboxProps} />}
          {items.map(item => (
            <Checkbox
              key={item.id}
              {...getItemCheckboxProps(item)}
            />
          ))}
          {!hasResults && (
            <StateCard
              title={noResultsTitle}
              description={noResultsDescription}
            />
          )}
          {hasMoreItems && (
            <Stack ref={loadMoreTriggerRef}>
              <Spinner />
            </Stack>
          )}
        </Stack>
      </CardContainer>
    </Stack>
  );
};

export default FilterAccordionContent;
