import React from 'react';

import { Popover } from '@mui/material';
import { useTheme } from '@mui/material/styles';

import { IFilterDropdownProps } from '../types';
import { FilterDetails } from './filter-details';

/**
 * @description {FilterDropdown} Renders the FilterDropdown component.
 * @param {IFilterDropdownProps} props - The props of the FilterDropdown component.
 * @return {JSX.Element} The rendered FilterDropdown component.
 */
export const FilterDropdown = ({
  filterSidebarData,
  featureName,
  filter,
  itemsApplied,
  anchorEl,
  onApplyFilter,
  onDropdownClose,
  searchTextCallBack,
  isLoading,
}: IFilterDropdownProps): JSX.Element => {
  const { palette } = useTheme();

  return (
    <Popover
      anchorEl={anchorEl}
      anchorOrigin={{
        vertical: 'bottom',
        horizontal: 'left',
      }}
      sx={{ mt: 3 }}
      open
      onClose={onDropdownClose}
      slotProps={{
        paper: {
          sx: {
            border: `1px solid ${palette?.primary?.lighter}`,
            borderRadius: 2,
            width: '263px',
          },
        },
      }}
    >
      <FilterDetails
        isLoading={isLoading}
        filterSidebarData={filterSidebarData}
        featureName={featureName}
        filter={filter}
        itemsApplied={itemsApplied}
        onApplyFilter={onApplyFilter}
        itemsListHeight="18vh"
        searchTextCallBack={searchTextCallBack}
      />
    </Popover>
  );
};